Verificador de contraste de cores

O nível AA exige 4.5:1 para texto normal e 3:1 para texto grande (critério de sucesso 1.4.3); o nível AAA exige 7:1 e 4.5:1 (1.4.6). Componentes de interface e gráficos com significado precisam de 3:1 em relação às cores adjacentes (1.4.11). O verificador informa aprovação ou reprovação para cada um desses cinco limites.

A WCAG define texto grande como texto de pelo menos 18 pontos em peso normal, cerca de 24 CSS pixels, ou de pelo menos 14 pontos em negrito, cerca de 18.66 CSS pixels. Todo texto menor é considerado normal e precisa de uma taxa mais alta.

Os limites da WCAG são exatos, então uma taxa que seria arredondada para 4.5, mas fica abaixo disso, não passa. O verificador compara a taxa sem arredondamento e a exibe truncada em duas casas decimais, para que o número mostrado nunca pareça melhor do que o valor real.

O Accessible Perceptual Contrast Algorithm é o método de contraste desenvolvido para os rascunhos do WCAG 3. Ele modela o contraste de luminosidade percebido, trata texto e fundo de forma diferente e retorna um valor de contraste de luminosidade, Lc, de cerca de -108 a 106. Ainda não faz parte de nenhum padrão WCAG publicado; por isso, use os resultados do WCAG 2 para verificar a conformidade e o APCA como uma verificação adicional.

O APCA leva em conta a polaridade: valores positivos indicam texto escuro sobre fundo claro, e valores negativos indicam texto claro sobre fundo escuro. As orientações usam o valor absoluto, então Lc -75 e Lc 75 ficam na mesma categoria.

Eles seguem o modo simples bronze do APCA: Lc 90 é preferível para texto corrido, Lc 75 é o mínimo para texto corrido, Lc 60 para outros textos de conteúdo, Lc 45 para títulos e textos grandes, Lc 30 para textos legíveis apenas em contextos pontuais, como textos de placeholder, e Lc 15 para elementos que não são texto. O tamanho e o peso da fonte ainda importam, então considere esses níveis como pontos de partida, não como uma conclusão.

As constantes do APCA-W3 da versão 0.0.98 G, revisão 4g, com o expoente simples 2.4 nos canais sRGB, o limite suave para pretos e o corte de baixo contraste. Texto preto sobre branco resulta em cerca de Lc 106.0 e texto branco sobre preto, em cerca de Lc -107.9, em conformidade com a implementação de referência.

Códigos hexadecimais com ou sem #, CSS nomes de cores, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), espaços color() como display-p3 e cmyk(). As cores fora do sRGB são convertidas para sRGB primeiro, pois ambas as fórmulas são definidas para cores de tela sRGB.

Uma cor de texto semitransparente é mesclada ao fundo antes da medição, como ocorre quando um navegador a renderiza. Um fundo semitransparente é primeiro mesclado ao branco. O resultado lista as cores opacas de texto e de fundo que foram efetivamente comparadas.

Para WCAG 2, não, pois a taxa entre a luminância mais clara e a mais escura é a mesma nos dois sentidos. Para APCA, sim, pois texto e fundo recebem pesos diferentes; por isso, insira a cor do texto no primeiro campo e a cor do fundo no segundo.