Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →
Barrierefreiheit
Que contraste de cores é exigido para o texto em websites?
Texto normal precisa de um contraste de pelo menos 4,5:1 para o fundo, texto grande — a partir de cerca de 24 pixels ou negrito a partir de cerca de 18,7 pixels — no mínimo 3:1. Esses limites vêm do padrão internacional WCAG. Garantem que também pessoas com visão envelhecida conseguem ler os seus textos — e cada visitante ao sol no telefone.
O contraste, explicado em linguagem quotidiana
O contraste descreve o quão fortemente a cor do texto e a cor de fundo diferem no brilho. Preto em branco atinge o valor máximo de 21:1 e lê-se sem esforço. O cinzento claro moderno em branco costuma estar abaixo de 3:1 — para pessoas com visão envelhecida esse texto desaparece numa área cinzenta. Afetados não são apenas pessoas com deficiência visual: também o cliente que procura os seus horários ao sol no telefone falha em contrastes fracos. O limite de 4,5:1 para texto normal e 3:1 para texto grande é o compromisso fixado no padrão entre liberdade de design e legibilidade fiável.
Assim o nosso núcleo de medição mede o contraste — também em imagens
A medição básica é realizada por axe-core: calcula para os textos do seu site o contraste da cor de texto e cor de fundo. Com texto em fotos ou gradientes nenhuma ferramenta consegue simplesmente ler o fundo — ali o nosso núcleo de medição prossegue: desativa o texto brevemente, fotografa o local no navegador, calcula o brilho do fundo real ponto por ponto e determina daí o contraste real contra a cor de texto. De «não decidível» torna-se um julgamento robusto. Cada local falhado o relatório documenta com o valor medido, o limite exigido e uma foto de prova — vê portanto exatamente qual texto é afetado.
Melhorar contraste sem sacrificar o design
Bom contraste não força design preto e branco. Costuma bastar escurecer a cor do texto alguns tons — cinzento claro torna-se antracite médio, que emite a mesma contenção e continua legível. Com texto em fotos ajudam truques comprovados: uma área escura semi-transparente atrás do texto, um gradiente de cor no limite inferior da imagem ou transferir o texto para uma área tranquila da imagem. As suas cores de marca tipicamente não precisa mudar — frequentemente basta usá-las para fundos grandes e para texto escolher uma variação mais escura ou mais clara da mesma família de cor.
Beispiele
Grauer Fließtext auf Weiß
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */Die Grenze für normalen Text ist 4,5:1, für großen Text ab 24 Pixel 3:1. Der Wert steht im Prüfbericht je Fundstelle.
Weiße Schrift auf Markenfarbe
.knopf { color: #fff; background: #5aa9ff; } /* 2,5:1 */.knopf { color: #fff; background: #1a5fb4; } /* 6,3:1 */- Verifique primeiro os textos cinzentos do seu site — rodapés, legendas de imagem e dicas de formulário mais frequentemente estão abaixo do limite.
- Peça à sua agência para verificar todas as cores de texto em relação aos limiares 4,5:1 e 3:1 e documentar os valores.
- Coloque o texto sobre fotografias com uma superfície escura semitransparente, em vez de deixar a legibilidade à mercê da imagem.
- Veja a sua página sob luz solar brilhante no telemóvel — o que não funciona lá nunca funciona para visitantes com visão fraca.
- Defina as combinações de cores verificadas no seu manual de design para que novas páginas as adoptem.