Verificador de contraste de cores
Verifique qualquer combinação de cor de texto e de fundo segundo a WCAG 2.2 AA e AAA. Veja a taxa de contraste exata, a aprovação para texto normal, texto grande e componentes de interface, e um link para compartilhar. Gratuito e privado: tudo roda no seu navegador.
Combinações prontas
Pré-visualização ao vivo
Título grande (24 px negrito)
Texto normal em 16 px. Jane quer LP, fax, CD, giz, TV e bom whisky. Um bom contraste mantém os parágrafos legíveis para pessoas com baixa visão, daltonismo ou usando o celular sob o sol forte.
Letras miúdas em 14 px — textos pequenos também precisam atingir o limite de texto normal.
Como a taxa de contraste é calculada
A WCAG define o contraste com base na luminância relativa, ou seja, o quão clara uma cor parece ao olho humano, numa escala de 0 (preto) a 1 (branco). Para cada cor, o ContrastCheck:
- Separa o valor hexadecimal nos canais vermelho, verde e azul e divide cada um por 255.
- Lineariza cada canal: valores ≤ 0,04045 são divididos por 12,92; os demais passam por
((c + 0.055) / 1.055)^2.4. - Pondera os canais conforme a sensibilidade do olho a cada um:
L = 0.2126·R + 0.7152·G + 0.0722·B.
A taxa de contraste é então (L_lighter + 0.05) / (L_darker + 0.05), que vai de 1:1 para cores idênticas até 21:1 para preto sobre branco. O resultado é comparado aos limites sem arredondamento: 4,5:1 (AA) e 7:1 (AAA) para texto normal, 3:1 (AA) e 4,5:1 (AAA) para texto grande, e 3:1 para componentes de interface e gráficos.
Não sabe qual nível buscar? Leia Contraste WCAG AA vs AAA: qual usar?
Perguntas frequentes sobre contraste de cores
›Qual é uma boa taxa de contraste de cores?
O nível AA da WCAG 2.2 exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA eleva esses valores para 7:1 no texto normal e 4,5:1 no texto grande. As taxas vão de 1:1 (cores idênticas) a 21:1 (preto sobre branco).
›O que conta como texto grande na WCAG?
Texto grande tem pelo menos 18 pontos (cerca de 24 px de CSS) em peso normal, ou pelo menos 14 pontos (cerca de 18,66 px de CSS) em negrito. Os limites de contraste para texto grande são menores porque caracteres maiores são mais fáceis de ler.
›O que é o requisito de 3:1 para componentes de interface e gráficos?
O critério de sucesso 1.4.11 da WCAG, Contraste não textual, exige uma taxa de 3:1 para os limites visuais de controles interativos (bordas de campos, indicadores de foco, estados de chaves) e para objetos gráficos necessários para entender o conteúdo, como ícones e linhas de gráficos.
›A ordem entre primeiro plano e fundo faz diferença?
Não. A fórmula da WCAG sempre divide a luminância da cor mais clara pela da mais escura, então inverter primeiro plano e fundo dá a mesma taxa. A pré-visualização muda, mas os números e os resultados não.
›Meus dados são enviados para algum lugar?
Não. Este verificador de contraste roda totalmente no seu navegador. O único lugar onde suas cores ficam salvas é a URL da página (?fg=…&bg=…), o que permite salvar nos favoritos ou compartilhar uma combinação específica.
›Por que 4,49:1 é reprovado se está tão perto de 4,5:1?
Os limites da WCAG são mínimos rígidos e não são arredondados. O ContrastCheck compara a taxa exata e trunca o valor exibido, então uma combinação que mostra 4,49:1 é reprovada no AA para texto normal. Use a cor sugerida para passar do limite.
›Este verificador é compatível com APCA ou WCAG 3?
Ainda não. O ContrastCheck usa a taxa de contraste da WCAG 2.x, que é a referência das leis e normas de contratação atuais (orientações da ADA, Section 508, EN 301 549 / Ato Europeu de Acessibilidade, Lei Brasileira de Inclusão e eMAG).