Verificador de contraste de cores - WCAG AA e AAA

Carregando ferramenta…

Verificador de contraste de cores WCAG

Texto com pouco contraste é um dos problemas de acessibilidade mais comuns na web. O Verificador de contraste da QodeCat calcula a taxa de contraste exata da WCAG 2.1 entre duas cores e mostra quais critérios de sucesso elas atendem.

AA texto normal: pelo menos 4,5:1.
AA texto grande (24px, ou 18,66px em negrito): pelo menos 3:1.
AAA texto normal: pelo menos 7:1; AAA texto grande: pelo menos 4,5:1.
Componentes de interface e gráficos (ícones, bordas de campos, indicadores de foco): pelo menos 3:1.

Como funciona

A fórmula oficial

Cada cor é convertida em luminância relativa com a curva sRGB definida pela WCAG. A taxa é (cor mais clara + 0,05) dividido por (cor mais escura + 0,05), o que dá um valor entre 1:1 (sem contraste) e 21:1 (preto no branco). Os resultados nunca são arredondados para cima, então 4,48:1 não passa no AA.

Corrija cores reprovadas rapidinho

Quando um par de cores é reprovado no AA, a ferramenta mantém o seu matiz e a sua saturação e encontra a cor de texto mais clara ou mais escura mais próxima que passa. Aplique com um clique e ajuste a partir dela.

Perguntas frequentes

P. Quais formatos de cor posso digitar?

Códigos hexadecimais como #333 ou #1a2b3c e valores rgb() como rgb(26, 43, 60). Você também pode usar o seletor de cor ao lado de cada campo.

P. O que conta como texto grande?

A WCAG define texto grande como pelo menos 18 pt (24px) em peso normal, ou 14 pt (cerca de 18,66px) em negrito. Texto grande precisa de apenas 3:1 para o AA.

P. O nível AA é suficiente?

O AA é o nível exigido pela maioria das leis e políticas de acessibilidade. O AAA é mais rigoroso e recomendado para textos longos ou para pessoas com baixa visão.