Verificador de Contraste de Cor Gratuito
Teste relações de contraste de cor contra os padrões de acessibilidade WCAG 2.1. Verifique a conformidade AA e AAA para legibilidade de texto. Gratuito, instantâneo e privado.
O Verificador de Contraste de Cores avalia qualquer par primeiro plano/fundo contra os padrões WCAG 2.1 AA e AAA usando a fórmula de luminância relativa. Mostra a razão de contraste, aprovação/reprovação por tamanho de texto e componentes UI, pré-visualização ao vivo e simulação de daltonismo para protanopia, deuteranopia e tritanopia. Sugere alternativas que passam quando o par falha. Tudo no navegador. Feito pela FreeToolHub.
| Texto Normal | Texto Grande | |
|---|---|---|
| WCAG AA | ✓ Aprovado Requer relação 4,5:1 | ✓ Aprovado Requer relação 3:1 |
| WCAG AAA | ✓ Aprovado Requer relação 7:1 | ✓ Aprovado Requer relação 4,5:1 |
| Componentes de UI | ✓ Aprovado Requer relação 3:1 (WCAG 2.1) | |
Perguntas Frequentes
O que é uma relação de contraste de cor?
Uma relação de contraste mede a diferença de brilho percebido entre duas cores, expressa como uma relação de 1:1 (sem contraste) a 21:1 (contraste máximo, preto no branco). É calculada usando a fórmula de luminância relativa WCAG.
Qual relação de contraste preciso para conformidade WCAG?
WCAG AA requer uma relação de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande (18pt ou 14pt negrito). WCAG AAA requer 7:1 para texto normal e 4,5:1 para texto grande. Componentes de UI requerem pelo menos 3:1 sob WCAG 2.1.
O que conta como "texto grande" no WCAG?
Texto grande é definido como 18 pontos (24px) ou maior em peso regular, ou 14 pontos (aproximadamente 18,66px) ou maior em negrito. Texto grande tem requisitos de contraste mais baixos porque é inerentemente mais fácil de ler.
Por que o contraste de cor é importante para acessibilidade?
Aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres têm alguma forma de deficiência na visão de cores. Texto com baixo contraste é difícil ou impossível de ler para pessoas com baixa visão ou daltonismo. Contraste adequado garante que seu conteúdo seja legível por todos.
Esta ferramenta armazena minhas seleções de cor?
Não. Tudo é executado localmente no seu navegador. Nenhuma cor, resultado ou dado é enviado a um servidor ou armazenado. Sua privacidade está totalmente protegida.
Como funciona o recurso de sugestão de cores?
Quando um par de cores falha em um nível WCAG, a ferramenta calcula automaticamente a cor mais próxima que passaria, ajustando a luminosidade no espaço de cor HSL enquanto preserva o matiz e a saturação originais. Sugere tanto um primeiro plano mais escuro quanto um fundo mais claro.