Qual relação de contraste é recomendada para texto na web?

O padrão WCAG exige no mínimo 4.5:1 para texto normal e 3:1 para texto grande (18px ou mais, ou 14px negrito ou mais).

A ferramenta simula daltonismo?

Não. Esta ferramenta calcula apenas a relação de contraste matemática. Para simulação de daltonismo, use ferramentas específicas como o Chrome DevTools.

Qual fórmula é usada para o cálculo?

A fórmula oficial do WCAG: (L1 + 0.05) / (L2 + 0.05), onde L1 e L2 são as luminâncias relativas das duas cores.

Devo sempre buscar o nível AAA?

Não necessariamente. O nível AA é suficiente para a maioria dos sites comerciais. O AAA é recomendado para conteúdo governamental ou de saúde.

Meus dados de cores são enviados a algum servidor?

Não. Todo o processamento é local no navegador. Suas cores nunca são transmitidas.

Posso usar formatos de cores além dos códigos HEX?

Sim, além do formato HEX clássico (como #ffffff), você também pode selecionar visualmente as cores no painel ou inserir livremente os valores numéricos de RGB.

O certificado é legalmente válido?

O certificado é uma prova técnica da diferença de cor baseada nas fórmulas W3C. Para conformidade legal completa, auditorias externas podem ser necessárias.

♿

contrast checker,

Verificador de Contraste (WCAG 2.1)

Verifica o contraste texto/fundo segundo WCAG.
Sugere cores válidas e emite certificados de conformidade.

♿

WCAG 2.1 AA/AAA

Conformidade internacional completa

🎯

Sugestão Automática

Propõe a cor válida mais próxima

🏆

Emitir Certificado

Baixar comprovante válido

🔤 Cor do Texto (Text)

HEX

🎨 Cor de Fundo (Background)

HEX

Isto é texto normal (16px) — pré-visualização

Isto é texto em negrito (16px bold)

Isto é texto grande (24px)

Isto é texto grande em negrito (18px bold)

Relação de contraste

12.63 : 1

AA Válido

AA
4.5

AAA
7.0

✅

AA Texto normal

≥ 4.5:1

✅

AA Texto grande

≥ 3:1

✅

AAA Texto normal

≥ 7:1

✅

AAA Texto grande

≥ 4.5:1

📋 Código CSS

about,

Sobre

Ferramenta gratuita para verificar se as combinações de cores cumprem os padrões de contraste WCAG 2.1. O baixo contraste dificulta a leitura para pessoas com deficiências visuais.

Quando as cores não cumprem, a ferramenta sugere automaticamente a cor mais próxima que cumpre, permitindo melhorar a acessibilidade sem mudar drasticamente o design.

Uma vez aprovado no padrão AA, você poderá baixar um Certificado de Conformidade WCAG AA para compartilhar.

how to,

Como usar

PASSO 1

Insira as cores

Clique no seletor de cores ou digite um código HEX / RGB diretamente para o texto e o fundo.

PASSO 2

Confira os resultados

A relação de contraste e o status WCAG AA/AAA são atualizados em tempo real com pré-visualização.

PASSO 3

Emitir Certificado

Se superar o objetivo AA, você pode baixar e compartilhar um certificado de validação digital sem custo.

glossary,

Glossário

Relação de contraste (Contrast Ratio): Um indicador numérico que representa diferenças de luminosidade. Varia de 1:1 (cores idênticas) até um máximo de 21:1 (preto sobre branco).
WCAG (Diretrizes de Acessibilidade): Padrão internacional W3C que define critérios de acessibilidade para conteúdo web, incluindo requisitos mínimos de contraste de cores.
Critério AA: O nível mínimo recomendado: 4.5:1 para texto normal e 3:1 para texto grande (18px+ ou 14px+ negrito).
Critério AAA: O nível mais exigente: 7:1 para texto normal e 4.5:1 para texto grande. Ideal para máxima acessibilidade.
Luminância Relativa: Cálculo matemático que transforma valores RGB em luminosidade percebida pelo olho humano, numa escala de 0 (preto) a 1 (branco).
Acessibilidade (a11y): Prática de design que garante que conteúdo web seja utilizável por todas as pessoas, incluindo aquelas com deficiências visuais, auditivas ou motoras.

faq,

FAQ

P.Qual relação de contraste é recomendada para texto na web?: O padrão WCAG exige no mínimo 4.5:1 para texto normal e 3:1 para texto grande (18px ou mais, ou 14px negrito ou mais).
P.A ferramenta simula daltonismo?: Não. Esta ferramenta calcula apenas a relação de contraste matemática. Para simulação de daltonismo, use ferramentas específicas como o Chrome DevTools.
P.Qual fórmula é usada para o cálculo?: A fórmula oficial do WCAG: (L1 + 0.05) / (L2 + 0.05), onde L1 e L2 são as luminâncias relativas das duas cores.
P.Devo sempre buscar o nível AAA?: Não necessariamente. O nível AA é suficiente para a maioria dos sites comerciais. O AAA é recomendado para conteúdo governamental ou de saúde.
P.Meus dados de cores são enviados a algum servidor?: Não. Todo o processamento é local no navegador. Suas cores nunca são transmitidas.
P.Posso usar formatos de cores além dos códigos HEX?: Sim, além do formato HEX clássico (como #ffffff), você também pode selecionar visualmente as cores no painel ou inserir livremente os valores numéricos de RGB.
P.O certificado é legalmente válido?: O certificado é uma prova técnica da diferença de cor baseada nas fórmulas W3C. Para conformidade legal completa, auditorias externas podem ser necessárias.