Validar um design web
Verificar os pares de texto e fundo antes de programar evita refazer a paleta mais tarde.
Verificador de contraste
Verifica se duas cores cumprem o contraste WCAG.
🔒 Este ficheiro é processado no teu navegador. Nunca é enviado para um servidor.
…
Para que serve
O contraste entre um texto e o seu fundo determina se se consegue ler com comodidade. Mede-se como uma relação numérica entre as luminosidades de ambas as cores, de 1:1 quando são idênticas até 21:1 no caso do preto puro sobre branco puro.
As normas WCAG, referência internacional de acessibilidade web, fixam os limiares. Para texto de tamanho normal, 4.5:1 é o mínimo do nível AA, o que habitualmente se exige e o que a legislação de acessibilidade de muitos países impõe a sites públicos. O nível AAA, mais estrito, pede 7:1.
Isto não é só cumprir uma norma. O cinzento claro sobre branco que fica tão elegante no ecrã do designer torna-se ilegível ao sol, num telemóvel com pouco brilho ou para qualquer pessoa com a vista cansada, que são muitas mais do que se costuma supor.
Como funciona
- Indique a cor do texto e a cor de fundo que quer verificar.
- A ferramenta calcula de imediato o rácio de contraste entre ambas.
- Verifique se cumpre os níveis AA e AAA das normas de acessibilidade WCAG.
Quando usar
Cumprir legislação
Os sites da administração pública e muitos cadernos de encargos exigem nível AA.
Textos sobre imagem
Um título sobre uma foto tem de ser verificado contra a zona mais clara dessa foto.
Conselhos práticos
- O texto grande e a negrito tem um limiar mais permissivo, 3:1, mas convém não o apurar.
- Os textos secundários em cinzento são a falha mais habitual: costumam ficar abaixo de 4.5:1 sem ninguém reparar.
- Verifica também os estados dos links e botões, não só o texto normal.
- Se um par não chega ao mínimo, costuma bastar escurecer o texto em vez de mudar o fundo.
Perguntas frequentes
Que rácio preciso para ser acessível?
Para texto normal, um mínimo de 4.5:1 cumpre o nível AA (o padrão habitual) e 7:1 cumpre o nível AAA, mais exigente.
Porque é importante o contraste de cor?
Um contraste baixo dificulta a leitura a pessoas com baixa visão e torna o seu site menos acessível e mais cansativo para toda a gente, sobretudo ao ar livre ou em ecrãs de má qualidade.