HTML COM ACESSIBILIDADE

Definindo cores nos documentos HTML

Ao desenvolver em HTML, existem muitas oportunidades para se fazer o uso de um recurso visual muito explorado, a aplicação de cores.

No decorrer deste curso, estaremos aprendendo a aplicar cor para o fundo da página, para as fontes, para as tabelas e em outras situações que for possível o seu uso.

O bom censo e a criatividade são os ingredientes necessários para uma excelente utilização deste recurso.

Uma das regras básicas que nos auxilia na hora de escolhermos as cores que aplicaremos em uma página, é a utilização de cores contrastantes entre o fundo da página em relação à cor da fonte utilizada, pois deste modo, o leitor não precisará de grandes esforços para a sua visualização. Logo se o fundo da página estiver preenchido por uma cor clara, a fonte utilizada deverá ter uma tonalidade escura e vice-versa.

Exemplos:

  • Uma página com o fundo branco ou amarelo, fará contraste principalmente com a utilização de fontes com as cores vermelha (mais utilizada nos títulos de documentos), azul, preta etc.
  • Caso o fundo do documento esteja em vermelho, azul ou preto, para contrastar deveremos utilizar principalmente as fontes com as cores branca ou amarela.

Não é muito recomendado o uso de cores escuras para o fundo da página, mas como foi colocada anteriormente, a definição das cores dependerá do conteúdo que será exposto, das características comuns do seu público-alvo e sempre deverá ser ponderada pelo bom censo e pela sua criatividade.

Em todo o caso, é sempre bom solicitar a opinião de uma ou mais pessoas, para que através de seus relatos, você possa identificar as cores que serão mais apropriadas para compor os elementos da página. Lembre-se sempre que o desenvolvimento de um site deve visar agradar seus visitantes e não somente ao seu criador.       

A definição de cores em páginas HTML é feita com base no padrão RGB. Este padrão é baseado nas três cores do qual originou seu nome (red "vermelho", green "verde" e blue "azul") e a partir dessas cores básicas, são derivadas as demais cores.

As cores são geralmente definidas através de um atributo específico no qual recebe como valor, um código do padrão RGB em hexadecimal equivalente à cor que se deseja aplicar, precedido do sinal #.

Algumas cores podem ser definidas diretamente pelo seu nome em inglês, mas deste modo, não é possível explorar características como a intensidade do brilho e a tonalidade das cores, por esta vantagem, recomendamos a utilização do padrão RGB com seus valores em hexadecimal, apesar de ser um pouquinho mais complicado o seu uso.

A diferença entre a base decimal para a hexadecimal, é a quantidade de unidades representativas existentes em cada uma dessas.

  • Base decimal (10 unidades):

0<1<2<3<4<5<6<7<8<9

  • Base hexadecimal (16 unidades):

0<1<2<3<4<5<6<7<8<9<a<b<c<d<e<f

  • Sintaxe genérica para aplicação de cores:

<tag_que_permite_cor atributo_cor="#RRGGBB">

  • Objeto da ação:

</tag_que_permite_cor>

Onde: A (tag_que_permite_cor) é uma tag no qual definirá cor seja para o fundo da tela usando a tag (<body>), seja para definir cores para as fontes através da tag (<font>), para definir cores para o fundo ou célula de uma tabela etc.

O (atributo_cor) é um atributo genérico que pode ser usado para definir cor do fundo "bgcolor", cor das fontes "color", bordas de objetos quando presentes "bordercolor" etc.

O valor recebido pelos atributos acima, é composto por seis dígitos em hexadecimal, sendo (2 dígitos) para a cor vermelha "red", (2 dígitos) para a cor verde "green" e mais (2 dígitos) para a cor azul "blue". O sinal # deve sempre preceder estes (6 dígitos) como o demonstrado na sintaxe acima.

Os dois dígitos em hexadecimal usado para cada uma das cores, representam um único valor e pode variar desde seu valor mínimo (00 na base hexadecimal = 00 na base decimal) que significa a ausência total da cor, até seu valor máximo (ff na base hexadecimal = 255 na base decimal) que significa o total da tonalidade de uma cor aplicada.

Veja os exemplos:

  • atributo_cor="#ff0000" – Representa a cor vermelha, pois nos dois primeiros dígitos que são referentes a esta cor, está representado com o seu valor máximo (ff). Perceba que os dígitos referentes às cores verde e azul estão com ausência total de cor (0000).

  • atributo_cor="#00ff00" – Neste exemplo, a cor aplicada será a verde, por estar com seus dois dígitos preenchidos pelo valor máximo, enquanto a cor vermelha que a antecede e a cor azul que é posterior estão respectivamente com seus valores representados por (00).

  • atributo_cor="#0000ff" – Neste momento, você já deve ter entendido o funcionamento do padrão RGB e deve estar pensando que desta forma, está representada a cor azul. Se pensar assim, parabéns, pois os dois dígitos referentes a esta cor, estão preenchidos com o seu valor máximo (ff).

Quanto maior for o valor empregado em cada uma das cores, esta tende a ser mais clara e quanto menor o valor empregado, a cor tende a ser mais escura.

Exemplos:

  • A cor verde representada por "#00ff00" é mais clara do que o verde representado por "#00bb00", que por sua vez ainda é mais claro do que o verde representado por "#008000".

  • Atributo_cor="#ffffff" – Representa a cor branca (foi empregado o valor máximo em todas as cores).

  • Atributo_cor="#000000" – Representa a cor preta (ausência de todas as cores).

Pelo que notamos até o momento, através da combinação entre as três cores básicas do padrão RGB, é possível originar as demais cores além de poder definir as suas tonalidades.

Veja na próxima página a tabela com as 16 cores reconhecidas pelos navegadores (mais utilizadas), tanto pelo nome da cor em inglês (neste caso é indiferente o uso de letras maiúsculas ou minúsculas), como pelo seu código hexadecimal correspondente do padrão RGB.

Navegue na tabela, utilizando-se da tecla (tab) observe que serão apresentados na coluna da esquerda os nomes das cores e na coluna da direita, seu respectivo código em hexadecimal.

http://www.w3.org/Graphics/Color/sRGB

Para obter uma lista com a representação das demais cores no padrão RGB, acesse o endereço (em inglês):

http://www.w3.org/TR/css3-color

 

Pressione ENTER para retornar a página anterior.Pressione ENTER para retornar ao Menu. Pressione ENTER para avançar para a próxima página.