Por que o contraste de cor importa
Aproximadamente 8% dos homens e 0,5% das mulheres tem alguma forma de deficiencia de visao de cores. Milhoes mais experimentam sensibilidade reduzida ao contraste devido ao envelhecimento, cataratas ou condicoes de visualizacao (luz solar intensa, monitores antigos). O texto com contraste insuficiente nao e um inconveniente menor, torna o conteudo ilegivel para uma parcela significativa do publico.
O WCAG (Web Content Accessibility Guidelines) fornece o padrao internacional para contraste de cor acessivel, e e referenciado em leis e regulamentos de acessibilidade em todo o mundo (ADA nos EUA, EN 301 549 na UE, AODA no Canada).
O que e o racio de contraste?
O racio de contraste mede a diferenca de luminancia entre duas cores. E expresso como um racio de 1:1 (cores identicas, sem contraste) a 21:1 (texto preto sobre fundo branco, contraste maximo).
A formula compara a luminancia relativa (uma medida ponderada de brilho percebido) da cor de primeiro plano com a cor de fundo:
Racio de contraste = (L1 + 0,05) / (L2 + 0,05)
Onde L1 e a luminancia da cor mais clara e L2 e a da mais escura. Ambos os valores sao calculados a partir dos valores de canal RGB linear.
Nao e necessario calcular isto manualmente, os verificadores de contraste fazem-no por si.
Requisitos WCAG 2.1
O WCAG define dois niveis de conformidade relevantes para o contraste:
Nivel AA (requisito padrao)
| Tipo de conteudo | Racio de contraste minimo |
|---|---|
| Texto normal (< 18pt / 14pt bold) | 4,5:1 |
| Texto grande (>= 18pt ou >= 14pt bold) | 3:1 |
| Componentes de interface e elementos graficos | 3:1 |
Nivel AAA (melhorado)
| Tipo de conteudo | Racio de contraste minimo |
|---|---|
| Texto normal | 7:1 |
| Texto grande | 4,5:1 |
O que esta isento dos requisitos de contraste
- Texto decorativo (decoracao visual pura sem valor informativo)
- Texto em logotipos e nomes de marcas
- Elementos de interface desativados/inativos
- Conteudo de imagem pura (embora o texto alternativo deva cumprir o contraste se transportar informacao)
Como verificar o contraste
Ferramentas de desenvolvimento no browser
O Chrome e o Firefox tem verificacao de contraste integrada. No DevTools, selecione um elemento de texto, consulte o separador Acessibilidade e o racio de contraste e mostrado com indicadores de aprovacao/reprovacao.
Ferramentas de design
O Figma, Sketch e Adobe XD tem plugins de acessibilidade que verificam os racios de contraste durante o design.
Verificador dedicado
O Verificador de Contraste de Cor deste site permite inserir qualquer cor de primeiro plano e de fundo (HEX, RGB ou HSL) e mostra imediatamente o racio de contraste, o estado de aprovacao/reprovacao WCAG AA/AAA e uma previa do texto em varios tamanhos.
Falhas comuns e correcoes
Texto cinzento claro sobre fundo branco, extremamente comum, quase sempre reprovado. Escureca o texto ou clareia o fundo.
Texto branco sobre uma cor de saturacao média, muitas vezes reprovado em tamanhos de texto menores, mesmo parecendo bem em tamanhos grandes. Verifique no tamanho de letra real.
Texto de marcador de posicao, a cor padrao do browser para marcadores de posicao e tipicamente muito clara e quase universalmente reprova o WCAG AA. Use color: #767676 ou mais escuro para o texto de marcador de posicao.
Interface com apenas icones, um icone sem rotulo de texto e um elemento grafico e deve cumprir o racio de 3:1 em relacao ao fundo.
Informacao apenas por cor, nunca transmita informacao apenas por cor (por exemplo, "os erros sao mostrados a vermelho"). Isto reprova o WCAG 1.4.1 mesmo que o contraste seja adequado, porque os utilizadores com daltonismo nao conseguem distinguir o estado.
WCAG 3.0 e APCA
O WCAG 3.0 (em desenvolvimento) introduz o APCA (Advanced Perceptual Contrast Algorithm), que tem em conta o peso, tamanho e contexto de visualizacao da letra de formas que o racio atual de 4,5:1 nao faz. O APCA produz menos falsos positivos (assinalando texto que e de facto legivel) e menos falsos negativos. Acompanhe para projetos futuros, o padrao atual 2.1 continua a ser a linha de base legal.
Resumo
O WCAG 2.1 exige um racio de contraste minimo de 4,5:1 para texto normal e 3:1 para texto grande e componentes de interface (Nivel AA). Estes requisitos protegem a legibilidade para pessoas com baixa visao, daltonismo e deficiencia visual situacional. Teste no inicio do processo de design, adaptar escolhas de cor retroativamente e significativamente mais dificil do que acerta-las desde o inicio.