Contraste WCAG AA

Aquele cinza clarinho fica lindo no monitor do escritório e some na tela do celular no sol. A régua objetiva para resolver essa discussão é a razão de contraste. Escolha as duas cores nos seletores, a do texto e a do fundo, e a página devolve algo como 4.54:1 seguido do nível alcançado: AAA, AA, AA Large ou Falha. O valor se atualiza a cada ajuste, sem botão de calcular no meio do caminho.

A conta não é a diferença de brilho que o olho percebe: cada canal RGB é linearizado e recebe um peso (0,2126 no vermelho, 0,7152 no verde, 0,0722 no azul), e a razão é a luminância mais clara mais 0,05 dividida pela mais escura mais 0,05. O verde domina o cálculo, por isso um verde vivo como #22c55e no branco dá só 2.28:1 e reprova, enquanto um azul escuro passa sobrando. A ordem das cores não muda nada.

O selo mostra apenas o nível mais alto alcançado, sem separar por tamanho de fonte: 5:1 aparece como AA, mas num título de 24px isso já seria AAA. A ferramenta lê só cor sólida, então gradiente, transparência e foto de fundo ficam de fora; nesses casos, teste contra o tom mais claro da área. Contraste aprovado também não resolve daltonismo: se a única diferença entre dois estados for a cor, o número passa e o usuário continua perdido.