A verificação de contraste WCAG passa por alguns passos simples. Nada sai do teu navegador.
- Introduzes uma cor de primeiro plano e uma de fundo. A ferramenta analisa valores hex, rgb(), hsl() ou cores CSS com nome nos seus valores de canal vermelho, verde e azul.
- Cada canal RGB é linearizado usando a função de transferência sRGB. Isto converte os valores de visualização codificados com gama em intensidades de luz lineares.
- Os valores lineares são ponderados pela sensibilidade do olho humano a cada canal — 0,2126 para o vermelho, 0,7152 para o verde, 0,0722 para o azul. A soma é a luminância relativa da cor.
- O rácio de contraste é (L1 + 0,05) ÷ (L2 + 0,05), onde L1 é a luminância da cor mais clara e L2 a da mais escura. O 0,05 adicional mantém a fórmula válida para o preto puro.
- O rácio é comparado com os limiares WCAG: o texto normal AA precisa de pelo menos 4,5:1, o texto grande AA 3:1, o texto normal AAA 7:1 e o texto grande AAA 4,5:1. Texto grande significa pelo menos 18pt ou 14pt a negrito.
FAQ
Perguntas frequentes sobre a verificação de contraste WCAG.
Qual é a diferença entre AA e AAA?
AA é o nível mínimo de conformidade para a maioria do conteúdo web. Exige um rácio de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. AAA é um padrão mais elevado que requer 7:1 para texto normal e 4,5:1 para texto grande. Podes ter como objetivo AAA para conteúdo chave como o corpo de texto de um site de notícias, enquanto usas AA para o design geral. Cumprir AAA em todo o lado pode ser difícil com as cores da marca, por isso muitas equipas visam AA em geral e elevam o texto chave para AAA quando possível.
O que é considerado «texto grande» segundo a WCAG?
A WCAG 2.x define texto grande como pelo menos 18 pontos (24px) para peso normal, ou 14 pontos (~19px) para negrito. Símbolos e ícones que fazem parte de um tipo de letra seguem os mesmos limiares. Se não tiveres a certeza de qual limiar se aplica à tua IU, verifica ambos — AA Grande tem uma barreira mais baixa (3:1), por isso a maioria dos pares de cor que falham AA Normal passam AA Grande quando o texto é suficientemente grande.
Porque é que o meu par passa AA Grande mas falha AA Normal?
Porque AA Grande só requer um rácio de 3:1 enquanto AA Normal requere 4,5:1. A WCAG define um limiar mais baixo para texto grande porque caracteres maiores são mais fáceis de ler mesmo com menos contraste. Um par de cor que obtenha, por exemplo, 4,0:1 passa AA Grande (limiar 3:1) mas falha AA Normal (limiar 4,5:1). Isto é muito comum com cores de marca claras usadas como primeiro plano sobre fundos brancos.
Posso confiar apenas nesta ferramenta para auditar a acessibilidade?
Esta ferramenta verifica uma coisa — o rácio de contraste WCAG 2.x entre duas cores sólidas. A acessibilidade real envolve mais: indicadores de foco, tamanho e peso da fonte, cor como única forma de transmitir informação, e compatibilidade com leitores de ecrã e ferramentas de zoom. Usa esta verificação de contraste juntamente com outros métodos de auditoria para obter uma imagem completa da acessibilidade da tua aplicação.
Que formatos de cor a entrada aceita?
Podes colar códigos hex de 3, 4, 6 ou 8 dígitos (com ou sem #), valores rgb() e rgba() em sintaxe tradicional com vírgulas ou sintaxe moderna separada por espaços, hsl() e hsla() com qualquer unidade de tom padrão (deg, rad, grad, turn), hsv(), hwb() e qualquer uma das 150 cores CSS com nome da especificação CSS Color Module Level 4. A cor é analisada inteiramente no teu dispositivo.