Verificador de Contraste de Cores

Verifique as taxas de contraste WCAG 2.1. Obtenha badges Aprovado/Reprovado para níveis AA e AAA com alternativas acessíveis.

A rápida raposa marrom salta sobre o cão preguiçoso.

Texto Grande (18pt+)

Taxa de Contraste

12.63:1

Resultados WCAG 2.1

AA Texto NormalAprovado

Mín. necessário: 4.5:1

AA Texto GrandeAprovado

Mín. necessário: 3:1

AAA Texto NormalAprovado

Mín. necessário: 7:1

AAA Texto GrandeAprovado

Mín. necessário: 4.5:1

Verificador de Contraste de Cores Grátis – Ferramenta de Conformidade WCAG 2.1

O contraste de cores é um dos fatores mais críticos na acessibilidade web. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1, mantidas pelo W3C, estabelecem taxas de contraste mínimas entre cores de texto e fundo para garantir que o conteúdo seja legível por todos, incluindo pessoas com baixa visão ou daltonismo. Nosso Verificador de Contraste de Cores gratuito calcula instantaneamente a taxa de contraste entre quaisquer duas cores.

As diretrizes WCAG 2.1 definem quatro níveis de conformidade. O nível AA requer uma taxa mínima de 4.5:1 para texto de tamanho normal (abaixo de 18pt ou 14pt negrito) e 3:1 para texto grande (18pt ou mais, ou 14pt negrito ou mais). O nível AAA, o padrão mais alto, requer 7:1 para texto normal e 4.5:1 para texto grande.

A taxa de contraste é calculada usando a luminância relativa, uma medida de quão brilhante uma cor aparece ao olho humano. A fórmula converte valores sRGB em valores lineares, depois os pondera segundo a percepção humana: o verde contribui mais para a luminosidade percebida (71,52%), seguido pelo vermelho (21,26%) e azul (7,22%).

Contraste de cor insuficiente afeta uma porção significativa dos usuários web. Aproximadamente 8% dos homens e 0,5% das mulheres têm alguma forma de deficiência na visão de cores. Adultos mais velhos experimentam naturalmente uma sensibilidade ao contraste reduzida. Fatores ambientais como brilho da tela reduzem ainda mais o contraste efetivo.

Além da conformidade, bom contraste melhora a experiência geral do usuário. Texto fácil de ler reduz a fadiga ocular, aumenta a velocidade de leitura e melhora a compreensão. Marcas que priorizam design acessível também se beneficiam de melhor SEO. Nossa ferramenta simplifica a verificação de suas escolhas de cores antes da implementação.

Se sua combinação de cores não atende aos padrões WCAG, nossa ferramenta sugere automaticamente uma alternativa acessível. Ela ajusta a cor do primeiro plano para o tom mais próximo que atende o requisito AA Normal (4.5:1), preservando ao máximo a intenção do design. Este recurso é inestimável para designers e desenvolvedores.

FAQ

Compartilhar

Apoie este projeto

Se você acha nossas ferramentas úteis, nos pague um café!

Buy Me a Coffee

Ferramentas mais populares