Verificador de contraste de cores

Como usar o verificador de contraste de cores

1. 1. Informe as duas cores. Digite cada uma em HEX (#777777), rgb(), hsl() ou com um nome CSS, ou use o seletor. Trocar as inverte, o que ajuda a comparar a versão de texto claro sobre fundo escuro com a de texto escuro sobre fundo claro.
2. 2. Leia a razão e a tabela. A razão vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco). A tabela compara a razão com cada requisito do WCAG e diz Aprovado ou Reprovado por extenso, não apenas por cor.
3. 3. Defina o tamanho. O texto grande tem requisitos menores. A prévia mostra texto normal, texto grande, texto grande em negrito e um controle com borda, para você julgar o seu caso.
4. 4. Corrija um par reprovado. Escolha o nível que deseja alcançar e use a cor de texto ou de fundo sugerida. A ferramenta mantém a matiz e altera apenas a luminosidade, no menor passo que passa.

O que o WCAG 2.2 exige

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2 definem razões mínimas de contraste em três critérios de sucesso. A razão é (L₁ + 0,05) ÷ (L₂ + 0,05), em que L₁ é a luminância relativa da cor mais clara e L₂ a da mais escura.

Texto grande tem pelo menos 18 pt, ou 14 pt em negrito — 24 px e cerca de 18,7 px em tela a 96 dpi. Logotipos, textos puramente decorativos e controles inativos estão isentos de 1.4.3. A regra de 3:1 do 1.4.11 cobre as partes de um controle necessárias para localizá-lo (a borda de um botão, o contorno de uma caixa de seleção), seus estados, como o foco, e os gráficos de que o leitor precisa para entender o conteúdo, como as linhas de um gráfico.

Como a razão é calculada

Cada canal sRGB é escalonado para 0–1 e linearizado: c ÷ 12,92 se c ≤ 0,04045; caso contrário, ((c + 0,055) ÷ 1,055)^2,4. A luminância relativa é então 0,2126 R + 0,7152 G + 0,0722 B. O verde pesa mais porque o olho é mais sensível a ele.

O WCAG não arredonda: uma razão de 4,4999 reprova 4,5. Por isso o verificador mostra a razão arredondada para baixo, com duas casas decimais, para que uma quase aprovação nunca apareça como aprovada.

Verificando slides, pôsteres e figuras

• Slides e pôsteres não são páginas da web, mas as razões do WCAG são o padrão aceito para eles também. O texto do corpo de um slide costuma ser grande (24 px equivalem a 18 pt); legendas, notas de rodapé e rótulos de eixos geralmente não são, então verifique-os como texto normal.
• Mire acima do mínimo para projeção. Um projetor em uma sala iluminada reduz o contraste para todos. Escolha AAA (7:1) para o texto de um slide que será exibido em uma sala clara.
• Texto sobre fotografia ou degradê não tem um único fundo. Verifique as áreas mais claras e as mais escuras atrás do texto, ou coloque o texto em um painel sólido.
• Gráficos e figuras se enquadram no 1.4.11: linhas, barras e marcadores precisam de 3:1 contra o fundo. A cor sozinha não deve transportar o significado — veja o Color Blindness Simulator.
• Cores translúcidas são achatadas antes de medir: o fundo sobre branco, depois o texto sobre o fundo. Uma página com outra coisa por trás precisa que essa cor seja informada diretamente.

Uma nota sobre o APCA

O Accessible Perceptual Contrast Algorithm (APCA) é um método candidato no rascunho de trabalho do WCAG 3, que leva em conta o tamanho, o peso e a polaridade do texto. É um rascunho, não um requisito, e nenhuma lei ou norma exige hoje. As razões do WCAG 2.x — as usadas nesta ferramenta — continuam sendo a base para declarações de conformidade.

Perguntas frequentes

Qual é uma boa razão de contraste?

4,5:1 ou mais para texto normal atende ao WCAG AA, e 7:1 atende ao AAA. Texto grande precisa de 3:1 para AA e 4,5:1 para AAA. Preto sobre branco é o máximo, 21:1. Qualquer valor abaixo de 3:1 é difícil de ler para muitas pessoas, mesmo com boa visão.

O que o WCAG considera texto grande?

Texto com pelo menos 18 pt (24 px) em peso normal, ou pelo menos 14 pt (cerca de 18,7 px) em negrito. O tamanho é medido como exibido, então uma fonte de slide que parece pequena em um material impresso ainda pode ser grande quando projetada.

O requisito de contraste vale para ícones e linhas de gráficos?

Sim, pelo critério de sucesso 1.4.11 Contraste de conteúdo não textual: componentes de interface e gráficos necessários para entender o conteúdo devem ter pelo menos 3:1 em relação às cores adjacentes. Gráficos decorativos e componentes inativos estão isentos.

Por que minha cor mostra 4,49 quando a razão é quase 4,5?

Porque o WCAG compara a razão exata e não dá crédito por arredondamento. Um par com 4,4999:1 reprova o requisito de 4,5:1, então a ferramenta mostra o valor arredondado para baixo, com duas casas decimais, e não 4,50.

Como funcionam as cores sugeridas?

A ferramenta mantém a matiz e a saturação da sua cor e move a luminosidade HSL para cima ou para baixo em pequenos passos, devolvendo o valor mais próximo que atinge a razão-alvo, como código HEX de 8 bits. Se nenhuma luminosidade puder alcançá-la — 7:1 contra um cinza médio, por exemplo —, ela informa isso e sugere alterar a outra cor.

O APCA é melhor que a razão do WCAG?

O APCA modela a percepção de forma mais próxima, especialmente para o modo escuro e textos finos, mas faz parte de um rascunho (WCAG 3), não de um requisito aceito. As leis de acessibilidade e as normas de compras que citam o WCAG 2.x usam a razão calculada aqui.