Verificador de Contraste de Cores Grátis

Test your text and background color combinations for WCAG 2.1 accessibility compliance. Get instantâneo pass/fail results for AA and AAA standards — sem cadastro necessário.

94,217+ verificações de contraste realizadas

Razão de Contraste

17.06:1

Prévia de Texto Grande (24px)

Prévia de texto normal (16px). A raposa marrom ágil salta sobre o cão preguiçoso. Este exemplo mostra como o texto normal aparece com essas cores.

Texto pequeno (14px) — frequentemente usado para legendas, notas de rodapé e metadados.

Invertido: fundo sobre a cor do texto (17.06:1 — mesma proporção)

AA Texto Normal

Exige 4,5:1

APROVADO

AA Texto Grande

Exige 3:1

APROVADO

AAA Texto Normal

Exige 7:1

APROVADO

AAA Texto Grande

Exige 4,5:1

APROVADO

Ready to build an accessible site with these colors?

Criar site com essas cores

O Que É a Color Contrast Checker?

Um verificador de contraste de cores é uma ferramenta que mede a diferença de luminância entre duas cores — normalmente texto e fundo — e verifica se atende aos padrões de acessibilidade WCAG.

Kleap's contrast checker instantâneoly calculates the WCAG 2.1 contrast ratio and tests it against all four compliance levels: AA Normal Text (4.5:1), AA Large Text (3:1), AAA Normal Text (7:1), and AAA Large Text (4.5:1). If your colors fail, the tool suggests the nearest accessible alternativa so você pode fix accessibility issues without redesigning your entire palette.

Níveis de Contraste WCAG Explicados

AA Texto Normal

Mínimo 4,5:1

Exige uma taxa de contraste mínima de 4,5:1. É o alvo de conformidade mais comum e se aplica à maioria dos textos do corpo.

AA Texto Grande

Mínimo 3:1

Exige uma taxa de contraste mínima de 3:1. Aplica-se a texto com pelo menos 18pt (24px) ou 14pt em negrito.

AAA Texto Normal

Mínimo 7:1

O padrão mais alto, exigindo taxa de contraste de 7:1. Garante legibilidade para usuários com baixa visão moderada.

AAA Texto Grande

Mínimo 4,5:1

Exige 4,5:1 para texto grande no nível AAA. Proporciona legibilidade aprimorada para títulos e displays.

Dicas para Design de Cores Acessível

1

Comece pelo contraste

Escolher your text and background colors with contrast in mind from the beginning. Retrofitting accessibility is much harder than building it in from the start.

2

Não dependa apenas das cores

Use ícones, padrões, sublinhados ou rótulos junto com as cores para transmitir significado. Cerca de 8% dos homens têm alguma forma de deficiência de visão de cores.

3

Teste em dispositivos reais

As cores parecem diferentes em monitores, celulares e sob luz solar intensa. Teste as taxas de contraste em dispositivos reais antes de finalizar o design.

4

Use o modo escuro também

If your site suportes dark mode, verify contrast ratios for both themes. A color pair that passes in light mode may fail in dark mode.

5

Atenção ao peso da fonte

Fontes finas e leves reduzem o contraste percebido. Se usar pesos abaixo de 400, busque uma taxa de contraste maior.

6

Verifique os estados interativos

Estados de hover, foco e ativo geralmente usam cores diferentes. Certifique-se de que todos os estados interativos atendam aos requisitos de contraste.

Contrast Checker Comparação

RecursoKleapWebAIMCoolorsAdobe Color
PreçoGrátisGrátisFreemiumGrátis (com conta Adobe)
Prévia em Tempo RealSim, texto ao vivo sobre fundoSim, básicoSimSim
Cor Acessível Mais PróximaSim, sugerida automaticamenteNãoNãoParcial
Níveis WCAG TestadosAA + AAA (normal + grande)AA + AAASomente AAAA + AAA
Built-in Criador de SitesYes, com IANãoNãoNão
Botão de Trocar CoresSimNãoNãoNão
Par Acessível AleatórioSimNãoNãoNão

Perguntas Frequentes

O que é a color contrast ratio?+
Uma taxa de contraste de cores é um valor numérico que representa a diferença de luminância (brilho percebido) entre duas cores. Calculado usando a fórmula WCAG, varia de 1:1 (sem contraste) a 21:1 (preto sobre branco).
Qual taxa de contraste WCAG eu preciso?+
Para conformidade WCAG 2.1 Nível AA (o padrão mais exigido), o texto normal precisa de pelo menos 4,5:1 e o texto grande precisa de 3:1. Para AAA (mais alto), é 7:1 e 4,5:1 respectivamente.
O que conta como texto grande no WCAG?+
Texto grande no WCAG é definido como texto com pelo menos 18 pontos (24 pixels CSS) ou 14 pontos em negrito (18,67px). Títulos geralmente se enquadram nesta categoria.
O WCAG se aplica a imagens e ícones?+
Sim, o Critério de Sucesso 1.4.11 do WCAG 2.1 exige que componentes de UI (como ícones, bordas de formulários e controles de foco) tenham uma taxa de contraste de pelo menos 3:1 contra as cores adjacentes.
Como a taxa de contraste é calculada?+
A taxa de contraste usa a fórmula de luminância relativa: (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 é a da cor mais escura.
Is WCAG AA enough for my site?+
WCAG AA is the standard referenced by most accessibility laws worldwide, including the ADA (US), EAA (EU), and EN 301 549 (Europe). For most sites and apps, AA compliance is both legally sufficient and provides good readability. AAA é recomendado for government sites, healthcare, and education, but is not typically required by law.
E se as cores da minha marca falharem no contraste?+
Você tem várias opções: ajuste levemente o tom da sua cor de marca (uma pequena mudança de luminosidade frequentemente resolve); use a versão mais clara ou mais escura da sua paleta para texto; ou use a cor da marca para elementos decorativos e escolha uma cor de texto de alto contraste para legibilidade.
O contraste importa para o modo escuro?+
Com certeza. Os mesmos requisitos de contraste WCAG se aplicam independentemente do esquema de cores. Na verdade, o modo escuro frequentemente requer reconsiderar a hierarquia de cores, já que as mesmas cores podem ter desempenho muito diferente sobre fundos escuros.
Usuários daltônicos conseguem ver contraste suficiente?+
Altas taxas de contraste ajudam significativamente usuários daltônicos, mas o contraste sozinho não é suficiente. O WCAG recomenda não depender apenas da cor para transmitir informações — use também texto, ícones ou padrões.
Como I test contrast in my existing site?+
Você pode use browser DevTools (Chrome's Lighthouse audit includes contrast checks), browser extensions like axe or WAVE, or paste your exact HEX/RGB values into this tool. For comprehensive testing, use automated tools like Lighthouse for a full-page scan, then manually verify any flagged elements. Remember to test hover states, focus styles, and placeholder text — these are commonly missed.

Build an Accessible Site with AI

Use your accessible color combinations to build a complete, WCAG-compliant site with Kleap's AI criador de sites.

Comece a Criar Grátis

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Verificador de Contraste de Cores Grátis | Ferramenta de Acessibilidade WCAG 2026