Os resultados são fornecidos apenas para fins informativos e podem conter erros. Verifique de forma independente as informações importantes. O uso desta ferramenta é por sua conta e risco.
O que esta ferramenta faz
O Verificador de Contraste de Cor mede o quanto um texto fica legível sobre um fundo. Escolha uma cor de texto e uma cor de fundo, e ele mostra a razão de contraste, de 1:1 (cores idênticas) até 21:1 (preto no branco), uma pré-visualização ao vivo e se o par passa nos quatro limites da WCAG: AA e AAA para texto normal e para texto grande.
A razão usa a fórmula de luminância relativa da WCAG 2: cada canal de cor é linearizado e ponderado (o verde pesa mais, o azul menos), e a luminância mais clara é dividida pela mais escura, somando 0,05 às duas. O nível AA exige 4,5:1 para texto normal e 3:1 para texto grande (pelo menos 24px, ou 18,66px em negrito). O AAA eleva esses valores para 7:1 e 4,5:1. O cálculo roda no seu navegador.
Quando usar
- Escolher uma cor de marca para botões e conferir se os rótulos brancos continuam legíveis sobre ela.
- Corrigir uma auditoria de acessibilidade do Lighthouse ou do axe que reprovou por texto com baixo contraste.
- Escolher um cinza para texto secundário que seja claro o bastante para parecer secundário, mas que ainda passe no AA.
- Criar um tema escuro, em que cores de destaque de tom médio muitas vezes reprovam sobre fundos escuros.
Exemplo prático
#ffffff sobre #3b82f6
3.68:1 - AA large only
#767676 sobre #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b sobre #ffffff
14.63:1 - passes all four
Perguntas sobre esta ferramenta
Por que texto branco em um botão azul vibrante reprova?
Cores saturadas de tom médio têm luminância relativamente alta, então texto branco sobre elas costuma ficar entre 3:1 e 4,5:1. Isso passa para rótulos grandes e em negrito, mas não para o texto corrido. Escureça o fundo um ou dois tons até a razão chegar a 4,5:1.
Qual nível devo buscar, AA ou AAA?
O AA é o nível citado pela maioria das leis e políticas de acessibilidade, então trate-o como o mínimo. O AAA é uma meta mais rigorosa que vale a pena atingir em textos longos de leitura, mas não é obrigatório para todos os elementos.
O contraste também vale para ícones e bordas?
A WCAG 2.1 pede pelo menos 3:1 para gráficos significativos e componentes de interface, como bordas de campos, anéis de foco e ícones que transmitem informação. Use o resultado AA - Large text (AA para texto grande) como referência nesses casos.
Posso verificar uma cor escrita em RGB ou HSL?
Os seletores trabalham com valores hex. Converta outras notações antes com as ferramentas da família do Conversor de cor HEX para RGB ou com o Conversor de Cores e depois cole o código hex.
Esta ferramenta é gratuita?
Sim, é grátis. Sem cadastro nem e-mail. Veja o resultado nesta página.
Como recebo o resultado?
Use a ferramenta nesta página. O resultado aparece aqui, sem envio por e-mail.