Ir para o conteudo

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

FAQ

Qual é uma boa taxa de contraste para acessibilidade web?+
WCAG 2.1 Nível AA requer pelo menos 4.5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt+ negrito). O Nível AAA requer 7:1 para texto normal e 4.5:1 para texto grande. Uma taxa de 4.5:1 ou superior é considerada boa.
O que conta como "texto grande" nas diretrizes WCAG?+
Texto grande é definido como texto de pelo menos 18 pontos (24px) em peso normal, ou pelo menos 14 pontos (aproximadamente 18.66px) em negrito. Texto grande tem um requisito de contraste menor porque seu tamanho maior o torna inerentemente mais legível.
Como a taxa de contraste é calculada?+
A taxa de contraste usa a luminância relativa de ambas as cores. Cada componente RGB é linearizado de sRGB, depois ponderado (R × 0.2126 + G × 0.7152 + B × 0.0722). A taxa é (L1 + 0.05) / (L2 + 0.05) onde L1 é a luminância da cor mais clara.
Esta ferramenta funciona para usuários daltônicos?+
Esta ferramenta verifica o contraste baseado em luminância, o padrão WCAG. Contraste de luminância suficiente garante legibilidade independentemente da deficiência de visão de cores.
Posso usá-la para design de apps móveis?+
Sim. As diretrizes WCAG 2.1 se aplicam a todo conteúdo digital, incluindo apps móveis, apps web e software desktop. As mesmas taxas de contraste devem ser seguidas para texto sobre fundos coloridos em qualquer interface digital.

Ferramentas mais populares