Calcula o rácio de contraste entre uma cor de texto e uma cor de fundo, e verifica se cumpre as diretrizes de acessibilidade WCAG 2.1. O rácio vai de 1:1 (sem contraste) a 21:1 (preto sobre branco).
Escolhe a cor de texto e a cor de fundo com os seletores. A pré-visualização e o rácio atualizam-se ao instante enquanto ajustas as cores.
O ratio de contraste mede quanta diferença de luz há entre as duas cores. Calcula-se em dois passos:
• Luminância relativa — a cada cor calcula-se a luz que o olho percebe com a fórmula WCAG: passa-se cada canal R, G e B para a escala 0-1, corrige-se a gama (linearização) e combinam-se ponderados 0.2126·R + 0.7152·G + 0.0722·B (o verde pesa mais porque o olho o vê mais brilhante). O resultado vai de 0 (preto) a 1 (branco).
• Ratio — com a luminância da cor mais clara (L1) e a da mais escura (L2) aplica-se (L1 + 0.05) / (L2 + 0.05). O +0.05 evita divisões extremas. É simétrico: tanto faz qual é o texto e qual o fundo, o ratio é o mesmo.
Cada combinação é avaliada em quatro critérios: AA normal (≥4.5:1), AA grande (≥3:1), AAA normal (≥7:1) e AAA grande (≥4.5:1). AA é o mínimo recomendado; AAA é o nível mais exigente.
Os limiares acima são para texto. Os elementos não textuais têm a sua própria regra WCAG (critério 1.4.11): bordas de campos, ícones, controlos de formulário e as partes significativas de um gráfico precisam de um contraste de pelo menos 3:1 em relação ao que têm ao lado. Esta ferramenta mostra os quatro selos de texto; para um ícone ou uma borda, verifica que o ratio chega a 3:1 mesmo que o selo de «AA normal» falhe.
Considera-se texto grande o de 18pt ou mais (uns 24px), ou o de 14pt ou mais (uns 18.67px) a negrito. O texto grande exige menos contraste do que o normal.
Sob o ratio há quatro linhas, uma por critério, com um selo:
• PASS (verde, com um visto) — essa combinação cumpre esse nível.
• FAIL (vermelho, com uma cruz) — não o cumpre; é preciso aumentar o contraste.
Como os limiares são crescentes, se passa AAA normal (7:1) passa também todos os restantes. Um texto que só passa «AA grande» (3:1) não é válido para texto normal.
Se uma combinação falha:
• Escurece o texto ou clareia o fundo (ou o contrário): quanto maior a diferença de luminância, maior o ratio.
• Não confies só no tom — duas cores vivas (vermelho sobre verde) podem ter um contraste baixíssimo apesar de «chocarem». O que conta é a luz, não a cor.
• O cinzento médio é traiçoeiro: texto cinzento claro sobre branco costuma falhar; aproxima-o do preto.
• Não uses só a cor para transmitir informação (ligações, erros): acompanha-a de sublinhado, ícone ou texto.
• Ajusta os seletores até o selo que te interessa passar a PASS.
Texto grande = 18pt+ (24px) ou 14pt+ (18.67px) negrito