Ir para o conteúdo principal
ImagensGrátis · 3 usos/diaProcessado no seu navegador

Checador de Contraste WCAG

Verifique contraste de cores e conformidade WCAG AA/AAA com preview e exportação.

Checador de Contraste WCAG

WCAG 2.1Processamento no dispositivo

Conformidade WCAG 2.1 com preview ao vivo e sugestão de cor acessível.

Algoritmo
Cor de frente
Ajustar frente0
Cor de fundo
Ajustar fundo0
Preview ao vivo
Conteúdo de exemplo

Este parágrafo demonstra o par de cores em texto corrido para validação visual rápida do contraste.

Texto pequeno auxiliar exigindo o nível mais alto de contraste.

Resultado

Diagnóstico de contraste

Link compartilhável
Razão
9.7:1
Nível
AAA
Texto normal
AA · Aprovado
AAA · Aprovado
Texto grande
AA · Aprovado
AAA · Aprovado
Elementos UI
AA · Aprovado
APCA Lc
Lc
92.1
Polaridade
Texto escuro / fundo claro
Faixa
Alto contraste
Verdictos por tamanho (APCA Bronze/Silver)
Caption 12px· regular · min Lc 90
Bronze · PassaSilver · Falha
Body small 14px· regular · min Lc 75
Bronze · PassaSilver · Passa
Body 16px· regular · min Lc 60
Bronze · PassaSilver · Passa
Subheading 20px· medium · min Lc 60
Bronze · PassaSilver · Passa
Headline 32px· bold · min Lc 45
Bronze · PassaSilver · Passa
Simulação de Daltonismo
Normal
Aa
9.7:1Passa AA
Deuteranopia
Aa
16:1Passa AA
Protanopia
Aa
14.6:1Passa AA
Tritanopia
Aa
11:1Passa AA
Acromatopsia
Aa
12:1Passa AA
Sugestão acessível
Combinação atual já passa AA — nenhuma sugestão necessária.
Pares salvos0 pares
Nenhum par salvo ainda.
Sobre

O que é Checador de Contraste WCAG?

Por QuorifyAtualizado em

O Checador de Contraste WCAG do Quorify mede o contraste entre duas cores, normalmente uma de texto e uma de fundo, e diz se essa combinação atende aos critérios de acessibilidade definidos pelas diretrizes WCAG. O cálculo é totalmente determinístico: a ferramenta aplica a fórmula oficial de razão de contraste, que compara a luminância relativa das duas cores e produz um número, como 4,5:1 ou 7:1. A partir desse número, ela informa se a combinação passa nos níveis AA e AAA da WCAG. Contraste suficiente é o que torna um texto legível para todo mundo, incluindo pessoas com baixa visão ou daltonismo, e também para qualquer um lendo sob sol forte ou em uma tela ruim. As diretrizes WCAG estabelecem limites mínimos: por exemplo, texto normal precisa de pelo menos 4,5:1 para o nível AA, enquanto o nível AAA, mais exigente, pede 7:1. Texto grande tem limites um pouco menores. Como o cálculo segue uma fórmula fixa, o resultado é exato e reprodutível, não uma estimativa ou opinião sobre a aparência das cores. A ferramenta oferece um preview para você ver as cores aplicadas como texto sobre fundo e exportação dos resultados, o que ajuda a registrar a verificação ou compartilhar com a equipe. É um recurso essencial para quem desenvolve interfaces, sites e materiais que precisam ser acessíveis, seja por convicção, seja por exigência legal ou de norma. Todo o cálculo acontece no seu navegador, sem envio de dados. Em vez de confiar no olho para julgar se um texto cinza claro sobre fundo branco está legível, o Quorify entrega o número exato e o veredito objetivo de conformidade.

Casos

Quando usar

  1. Verificar se a cor do texto sobre o fundo de um site atinge a razão mínima de 4,5:1 exigida pelo nível AA da WCAG.

  2. Desenvolvedor garantindo que botões e links sejam legíveis para pessoas com baixa visão antes de publicar uma interface.

  3. Testar combinações de cores de marca para descobrir quais passam no nível AAA e quais precisam de ajuste para texto pequeno.

  4. Designer documentando a conformidade de acessibilidade de um projeto exportando os resultados do contraste para a equipe.

  5. Conferir se um texto cinza claro sobre fundo branco é realmente legível, em vez de confiar apenas na aparência na tela.

Método

Como funciona

Informe as duas cores que você quer comparar: normalmente a cor do texto e a cor do fundo, inserindo os códigos ou usando o seletor. A ferramenta calcula a luminância relativa de cada uma e aplica a fórmula oficial da WCAG para obter a razão de contraste, mostrada como um número no formato como 4,5:1. Em seguida, ela compara esse valor com os limites das diretrizes e indica se a combinação passa nos níveis AA e AAA, considerando inclusive a diferença entre texto normal e texto grande. Use o preview para ver as cores aplicadas como texto sobre fundo e confirmar visualmente a legibilidade. Se a combinação não passar, ajuste uma das cores e o cálculo se atualiza. Quando terminar, você pode exportar os resultados para registrar a verificação. Por ser um cálculo determinístico feito no navegador, o número é exato e o mesmo par de cores sempre produz o mesmo resultado.

FAQ

Perguntas frequentes

Como o contraste é calculado?
A ferramenta aplica a fórmula oficial da WCAG, que compara a luminância relativa das duas cores e gera uma razão de contraste, como 4,5:1. O cálculo é determinístico, então o mesmo par de cores sempre produz o mesmo número.
O que significam os níveis AA e AAA?
São os níveis de conformidade da WCAG. O AA é o padrão mais comum, exigindo pelo menos 4,5:1 para texto normal; o AAA é mais rigoroso, pedindo 7:1. Texto grande tem limites um pouco menores em ambos.
Por que o contraste importa tanto?
Contraste suficiente garante que o texto seja legível para pessoas com baixa visão ou daltonismo, e também para quem lê sob sol forte ou em telas ruins. É um requisito central de acessibilidade.
Texto grande tem regras diferentes?
Sim. As diretrizes WCAG permitem uma razão de contraste menor para texto grande, já que ele é mais fácil de ler. A ferramenta leva isso em conta ao indicar se a combinação passa em cada nível.
O resultado é uma estimativa ou um valor exato?
É um valor exato. Como segue uma fórmula fixa, não há aproximação nem opinião envolvida: o número de contraste é calculado matematicamente e é reprodutível a qualquer momento.
Posso salvar ou compartilhar a verificação?
Sim. A ferramenta permite exportar os resultados, o que facilita registrar a conformidade de um projeto ou compartilhar a verificação com a equipe. Todo o cálculo é feito no seu navegador, sem envio de dados.
Fontes

Fontes oficiais

Tabelas, leis e referências consultadas para fundamentar esta ferramenta.

  1. Recomendação W3CWCAG 2.1W3C · World Wide Web Consortium

    WCAG 2.1 — Critério 1.4.3 Contraste (Mínimo)

    Define a razão de contraste e os mínimos de 4,5:1 (texto normal) e 3:1 (texto grande) do nível AA. Os limites AAA (7:1 e 4,5:1) vêm do critério 1.4.6.

  2. Recomendação W3CWCAG 2.1W3C · World Wide Web Consortium

    WCAG 2.1 — Critério 1.4.11 Contraste Não Textual

    Estabelece o mínimo de 3:1 para bordas, ícones e outros elementos de interface.

  3. Rascunho de padrãoAPCA 0.1.9Myndex Research · W3C AGWG

    APCA — Accessible Perceptual Contrast Algorithm

    Modelo perceptual candidato ao WCAG 3, usado no cálculo do Lc e dos veredictos por tamanho de fonte.

Metodologia — esta ferramenta segue os padrões de formato, compressão e codecs de imagem (W3C, especificações dos formatos) citados nas fontes acima. O processamento acontece no seu navegador: o arquivo e o que você digita não saem do seu dispositivo.

Relacionadas

Mais da mesma categoria

Da mesma categoria.