O texto cinza claro em um fundo branco pode parecer elegante e minimalista à primeira vista — e ser completamente ilegível para usuários com deficiência visual, luz solar forte na tela ou apenas cansaço visual normal no final de um dia de trabalho. O contraste de cores é um dos critérios mais “técnicos” de acessibilidade – há números exatos a serem atendidos – mas também é um dos mais fáceis de testar e corrigir antecipadamente.

Resumindo – o que este guia cobre

  1. Quais proporções as WCAG exigem
  2. Por que texto grande tem menos contraste
  3. Como verificar uma taxa de contraste na prática
  4. Como escolher antecipadamente uma paleta de cores acessível

Quais proporções as WCAG exigem

WCAG define uma taxa de contraste como um número entre 1:1 (nenhum contraste — cor idêntica) e 21:1 (o contraste máximo possível — preto puro sobre branco puro). No nível AA (o nível obrigatório na maioria dos lugares, incluindo Israel), o requisito é uma proporção de pelo menos 4,5:1 entre o texto normal e o contexto por trás dele. No nível AAA mais rigoroso, o requisito sobe para 7:1.

Por que texto grande tem menos contraste permitido

O texto grande permanece legível mesmo com menor contraste, então as WCAG definem um limite mais fácil: 3:1 no nível AA (em vez de 4,5:1) e 4,5:1 no nível AAA (em vez de 7:1). "Texto grande" é definido como texto de 18 pontos ou maior (cerca de 24 px) ou 14 pontos ou maior (cerca de 18,7 px) se estiver em negrito. Títulos grandes, por exemplo, podem “proporcionar” um contraste ligeiramente menor do que um parágrafo normal e ainda assim atender ao requisito.

Diagrama ilustrativo Comparando taxas de contraste Três exemplos de texto em segundo plano com diferentes taxas de contraste Relação de contraste entre texto e fundo Texto de exemplo 1.8:1 — ✕ falha Texto de exemplo 7.1:1 — ✓ atende AAA também Texto de exemplo 5.4:1 — ✓ atende ao nível AA Texto normal: pelo menos 4,5:1 · Texto grande (24px+ ou 18,7px em negrito): pelo menos 3:1 Ferramentas como o WebAIM Contrast Checker fornecem a proporção exata antes de finalizar uma paleta de cores
Três exemplos de texto em segundo plano: uma proporção muito baixa (1,8:1) falha até mesmo no nível básico; os outros dois índices atendem aos requisitos AA e AAA, respectivamente.

Como verificar uma taxa de contraste na prática

Não há necessidade de calculá-lo manualmente - ferramentas gratuitas como o WebAIM Contrast Checker permitem inserir os códigos de texto e cores de fundo e obter imediatamente a proporção exata e uma pontuação de aprovação/reprovação para cada nível. Vale a pena conferir não apenas o texto em um fundo sólido, mas também o texto sobre imagens de fundo ou gradientes — onde o contraste pode variar entre diferentes áreas da mesma imagem, por isso é melhor testar o ponto mais “problemático”.

💡 Dica prática

Não apenas texto: o mesmo requisito de contraste (em um limite mais fácil, 3:1) também se aplica a componentes gráficos de UI, como contornos de campos de formulário, ícones funcionais e bordas de botões — não apenas a letras.

Como escolher antecipadamente uma paleta de cores acessível

A abordagem mais eficiente é verificar o contraste na fase de design do modelo, e não em cada documento separadamente. Ao escolher as cores da marca para títulos, corpo de texto e links, vale a pena confirmar antecipadamente se cada combinação de texto e plano de fundo que você realmente usa atende a pelo menos 4,5:1. Desta forma, cada novo documento criado a partir do modelo “herda” automaticamente o contraste adequado, em vez de verificar cada documento separadamente depois de já ter sido escrito.

Quer saber se seus documentos atendem aos requisitos de contraste?

Nossa ferramenta verifica o contraste das cores como parte da verificação automática de cada arquivo PDF em seu site.

Examine seu site gratuitamente ←