UX/UI · Acessibilidade

Verificador de contraste

Escolha a cor do texto e do fundo. A ferramenta calcula a razão de contraste e mostra se passa nos níveis AA e AAA da WCAG.

Texto grande de exemplo Este é um parágrafo de texto normal usado para avaliar a legibilidade do contraste em tamanho de corpo.
Razão de contraste 21 : 1

Contraste é acessibilidade, não estética

Texto de baixo contraste exclui gente: pessoas com baixa visão, daltonismo, e qualquer um lendo numa tela ao sol. A WCAG define uma razão de contraste mínima entre a cor do texto e a do fundo — quanto maior, mais legível.

Os limites: texto normal precisa de 4,5:1 para o nível AA e 7:1 para AAA. Texto grande (a partir de ~18,66px em negrito ou ~24px normal) pode usar 3:1 (AA) e 4,5:1 (AAA). Componentes de interface e ícones essenciais pedem pelo menos 3:1.

Este cálculo segue a fórmula oficial de luminância relativa da WCAG e roda no seu navegador. Ele resolve o critério de contraste — acessibilidade completa envolve muito mais (teclado, leitores de tela, estrutura semântica), então trate isto como um primeiro filtro.