Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

G183: Utilizar uma relação de contraste de 3

Aplicabilidade

Texto a cores quando só a cor é utilizada para transmitir informações, tais como palavras que são links num parágrafo.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer um sinal visual redundante para os utilizadores que podem não conseguir distinguir uma diferença na cor do texto. Normalmente, as cores são utilizadas para indicar palavras que são links num parágrafo ou noutro bloco de texto. Por exemplo, as palavras dispersas no texto podem ser links de hipertexto identificados apenas por uma cor diferente do texto circundante. Esta técnica descreve uma forma de fornecer sinais de aviso adicionais no efeito hover e foco, de modo a que os utilizadores que possam ter dificuldades em distinguir as cores ou tenham baixa visão as possam identificar.

Com esta técnica, pode ser utilizada uma diferença de luminescência relativa (claridade) de 3:1 ou superior em relação ao texto circundante se a confirmação visual adicional estiver disponível quando um utilizador apontar o link ou utilizar a tecla de tabulação para avançar até ao mesmo. Os realces visuais podem, por exemplo, assumir a forma de sublinhado, uma alteração no estilo do tipo de letra, tal como negrito ou itálico, ou um aumento no tamanho da letra.

Embora a utilização desta técnica seja suficiente para cumprir este critério de sucesso, não é a técnica preferida para distinguir o link. Isto deve-se ao facto de os links que utilizam apenas a luminescência relativa da cor poderem não ser óbvios para as pessoas que só vêem a preto e branco. Se não existir um grande número de links no bloco de texto, recomendamos a utilização do sublinhado para os links.

Nota 1: Esta técnica é sobre a utilização das cores para além da luminosidade. Nesta técnica, a relação de contraste refere-se ao contraste entre um link e as palavras circundantes. Nos Critérios de Sucesso 1.4.3 e 1.4.6, a relação de contraste refere-se ao contraste entre uma palavra e o fundo. A diferença deve-se ao facto de esta técnica ser sobre a capacidade de os utilizadores distinguirem a diferença (uma diferença visível) entre diferentes blocos de texto, enquanto a relação de contraste utilizada nos Critérios de Sucesso 1.4.3 e 1.4.6 é sobre a legibilidade do texto em relação ao fundo para pessoas com incapacidades de visão e de distinção das cores.

Nota 2: Se um autor pretender utilizar a parte sobre as cores desta técnica (i.e., utilizar cores diferentes para as palavras em que as cores têm um contraste suficiente entre si) e também pretender estar em conformidade com o Critério de Sucesso 1.4.3 (contraste das palavras com o fundo), podem ser utilizadas as seguintes cores (por ex., texto a preto num parágrafo num fundo a branco com os links apresentados numa das cores indicadas na lista abaixo).

Nota 3: Se, a uma determinada altura, as tecnologias de apoio ou os browsers da Web fornecerem uma opção para sublinhar todos os links nas páginas Web, isto poderia ser utilizado em vez de um mecanismo de realce de links fornecido pelo autor.

Exemplos

Exemplo 1: Cores que fornecem um contraste de 3:1 com palavras a preto e um contraste de 4.5:1 com um fundo a branco

Consulte Links com uma relação de contraste de 3:1 com o texto circundante

Exemplo 2

Os links de hipertexto num documento estão a azul-claro (#3366CC) e o texto normal está a preto (#000000). Uma vez que o texto em azul é suficientemente claro, tem um contraste de 3.9:1 com o texto circundante e pode ser identificado como sendo diferente do texto circundante por pessoas com todos os tipos de daltonismo, incluindo as pessoas que não distinguem nenhuma cor.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Localize todas as ocorrências em que só a cor é utilizada para transmitir informações sobre o texto.

  2. Verifique se a luminescência relativa da cor do texto difere da luminescência relativa do texto circundante mediante uma relação de contraste de, no mínimo, 3:1.

  3. Verifique se apontar (com o ponteiro do rato) para o link provoca um melhoramento visual (tal como, um sublinhado, alteração do tipo de letra, etc.)

  4. Verifique se mover o foco do teclado para o link provoca um melhoramento visual (tal como, um sublinhado, alteração do tipo de letra, etc.)

Resultados Esperados