Contraste WCAG – Verifique se as cores passam em AA e AAA

Informe a cor do texto e a do fundo e veja a razão de contraste com a aprovação nos níveis AA e AAA da WCAG, para texto normal e grande.

Cor do texto

Cor de fundo

Texto grande de exemplo

Texto normal de exemplo — o suficiente para avaliar a leitura em um parágrafo com algumas linhas de conteúdo.

Texto pequeno, como legendas e rodapés de tabela.

Razão de contraste

6.91:1

AA · Texto normal
Abaixo de 18pt (ou 14pt em negrito)
mín. 4,5:1Passa
AAA · Texto normal
Nível mais rigoroso para leitura contínua
mín. 7:1Falha
AA · Texto grande
A partir de 18pt (ou 14pt em negrito)
mín. 3:1Passa
AAA · Texto grande
Títulos com exigência AAA
mín. 4,5:1Passa
AA · Componentes
Bordas de campos, ícones e estados de foco
mín. 3:1Passa

Cores com transparência são achatadas sobre o fundo antes do cálculo, do mesmo jeito que o navegador renderiza.

Como usar esta ferramenta

Escolha a cor do texto
Escolha a cor do fundo
Leia a razão de contraste calculada
Confira a aprovação em AA e AAA e ajuste as cores se reprovar

Sobre esta ferramenta

O que é

A razão de contraste compara a luminância relativa de duas cores, indo de 1:1 (idênticas) a 21:1 (preto sobre branco). A WCAG exige no mínimo 4,5:1 para texto normal no nível AA e 7:1 no AAA.

Quando usar

Validar a paleta de um site antes do desenvolvimento
Corrigir apontamento de acessibilidade em auditoria
Escolher a cor de texto sobre um fundo colorido
Conferir legibilidade de botões e links
Atender requisito de acessibilidade em edital ou contrato

Perguntas frequentes

Qual contraste mínimo preciso atingir?: No nível AA, 4,5:1 para texto normal e 3:1 para texto grande (a partir de 18,66px em negrito ou 24px). No nível AAA, 7:1 e 4,5:1 respectivamente.
O que conta como texto grande?: Texto a partir de 24px, ou a partir de 18,66px quando em negrito. Abaixo disso vale o requisito de texto normal.
Ícones e bordas também têm requisito?: Sim. Componentes de interface e elementos gráficos essenciais precisam de ao menos 3:1 contra o fundo adjacente, pelo critério 1.4.11 da WCAG.

Para aprofundar

Guia: converter RGB para HEX

Ferramentas relacionadas

Sobre esta ferramenta

O que é

A razão de contraste compara a luminância relativa de duas cores, indo de 1:1 (idênticas) a 21:1 (preto sobre branco). A WCAG exige no mínimo 4,5:1 para texto normal no nível AA e 7:1 no AAA.

Quando usar

Validar a paleta de um site antes do desenvolvimento
Corrigir apontamento de acessibilidade em auditoria
Escolher a cor de texto sobre um fundo colorido
Conferir legibilidade de botões e links
Atender requisito de acessibilidade em edital ou contrato

Perguntas frequentes

Qual contraste mínimo preciso atingir?

No nível AA, 4,5:1 para texto normal e 3:1 para texto grande (a partir de 18,66px em negrito ou 24px). No nível AAA, 7:1 e 4,5:1 respectivamente.

O que conta como texto grande?

Texto a partir de 24px, ou a partir de 18,66px quando em negrito. Abaixo disso vale o requisito de texto normal.

Ícones e bordas também têm requisito?

Sim. Componentes de interface e elementos gráficos essenciais precisam de ao menos 3:1 contra o fundo adjacente, pelo critério 1.4.11 da WCAG.