contraste de cores e WCAG
Contraste de cores não é uma impressão visual, é um número: o WCAG define uma fórmula exata que transforma duas cores em uma razão de 1:1 a 21:1, e essa razão decide se um texto passa ou reprova em acessibilidade.
Passa no AA de texto normal (mínimo 4,5:1) por uma margem mínima, mas reprova no AAA (mínimo 7:1); é o cinza de referência que costuma aparecer em exemplos de acessibilidade justamente por ficar no limite.
Passa em AA e também em AAA nas duas categorias de texto, porque o azul puro tem luminância baixa (o peso de 0,0722 do canal azul é o menor dos três) e contrasta bem com um fundo de luminância máxima.
É o teto matemático da fórmula: luminância 0 contra luminância 1 produz (1 + 0,05) / (0 + 0,05) = 21, nenhuma outra combinação de cores no espaço sRGB supera esse valor.
AA é o nível de conformidade adotado pela maioria das legislações e exige 4,5:1 para texto normal e 3:1 para texto grande. AAA é mais rigoroso (7:1 e 4,5:1) e nem sempre é viável para todo o conteúdo. Para a maior parte dos sites, atingir AA já garante boa legibilidade; busque AAA em conteúdos críticos.
No nível AA, o mínimo é 4,5:1 para texto normal e 3:1 para texto grande; no nível AAA, mais rigoroso, os mínimos sobem para 7:1 e 4,5:1 respectivamente. A maioria das leis de acessibilidade (como a Section 508 nos EUA e a LBI no Brasil) cobra o nível AA como piso.
Texto grande é definido em pontos tipográficos, não em pixels diretamente: 18pt (equivalente a 24px) ou mais em peso normal, ou 14pt (equivalente a 18,66px) ou mais em negrito. Abaixo dessas medidas, o texto entra na categoria normal e precisa do contraste mais alto.
Porque o contraste não é uma propriedade da cor do texto sozinha, é sempre uma relação entre duas luminâncias. Um cinza médio pode ter 4,5:1 contra branco puro e cair para menos de 3:1 contra um cinza claro, então cada combinação precisa ser recalculada, não presumida a partir de uma cor isolada.
Não: o critério 1.4.3 (que rege texto) pede 4,5:1 ou 3:1 conforme o tamanho, enquanto o critério 1.4.11 (Non-text Contrast) cobra apenas 3:1 para bordas de campos de formulário, ícones e outros componentes de interface que não são texto, um piso mais baixo porque a leitura desses elementos é menos exigente que a de uma frase.
Texto grande de exemplo
Este é um parágrafo de texto normal usado para avaliar a legibilidade do contraste escolhido.
Botão / bordaAprovado no nível AAA para texto normal
Todo o cálculo de luminância e contraste acontece no seu navegador. Nenhuma cor é enviada a servidores.