Verificador de Contraste
Insira uma cor de texto e uma cor de fundo para calcular a razão de contraste WCAG, com resultados de aprovação/reprovação em AA e AAA e uma pré-visualização ao vivo.
🔒 Processado localmente no seu navegador
Loading…
Como usar
- Insira uma cor de texto (primeiro plano) no primeiro campo, ou escolha com o seletor de cores.
- Insira uma cor de fundo no segundo campo, ou escolha com o seletor de cores.
- A razão de contraste e a pré-visualização da combinação real são atualizadas instantaneamente.
- Verifique os quatro selos para ver se a combinação passa em WCAG AA e AAA para texto normal e grande.
Funcionalidades
- Suporta os formatos de cor hex, rgb() e hsl()
- Calcula com precisão a razão de contraste por luminância relativa do WCAG 2.x
- Mostra selos de aprovado/reprovado para AA e AAA em texto normal e grande
- Pré-visualização ao vivo da combinação real de texto sobre fundo
- 100% no navegador — suas cores nunca saem do seu dispositivo
Perguntas frequentes
Como a razão de contraste é calculada?
A razão é calculada com a fórmula do WCAG 2.x: os canais sRGB de cada cor são linearizados, combinados em um valor de luminância relativa, e a razão é (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara. As razões vão de 1:1 (sem contraste) a 21:1 (preto sobre branco).
Qual é a diferença entre AA e AAA?
AA é o nível padrão que a maioria dos sites busca; AAA é um nível mais rigoroso e aprimorado. AA exige 4.5:1 no texto normal e 3:1 no texto grande, enquanto AAA exige 7:1 e 4.5:1, respectivamente.
O que conta como texto grande segundo o WCAG?
Texto grande é definido como pelo menos 18pt (24px) em peso normal, ou pelo menos 14pt (18.66px) em negrito. Traços maiores e mais grossos continuam legíveis com um contraste menor, por isso a exigência é mais baixa.
Quais formatos de cor posso inserir?
Você pode digitar códigos hex (#000 ou #000000), strings rgb()/rgba() ou hsl()/hsla(), ou usar os seletores de cor ao lado de cada campo.
Esta ferramenta guarda ou envia minhas cores?
Não. Toda a análise e o cálculo de contraste acontecem localmente no seu navegador, usando apenas JavaScript. Nada é enviado a um servidor nem armazenado.