Saltar para o conteúdo

Verificador de contraste de cores (WCAG AA e AAA)

Verifique se o seu texto se lê bem sobre o fundo: calcule a razão de contraste WCAG, confira AA e AAA para texto normal, texto grande e elementos de interface, e obtenha a cor mais parecida que passa.

4.64:1Bom

Título de prévia

A rápida raposa marrom salta sobre o cão preguiçoso

Cores

  • Texto normal

    AA 4.5 · AAA 7

    AAAAA

  • Texto grande

    AA 3 · AAA 4.5

    AAAAA

  • Elemento UI

    AA 3

    AA

Contraste 4.64:1. Texto normal: AA Passa, AAA Não passa. Texto grande: AA Passa, AAA Passa. Elemento UI: AA Passa.

Cores que passam

As cores mais parecidas que passam em texto normal, com o mesmo matiz. Clique numa para aplicá-la.

AA exige 4.5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 e 4.5:1 respectivamente.

Combinações de exemplo

Pares de cores comuns: alguns passam e outros não. Carregue um para conferir.

O que é a razão de contraste e por que importa

A razão de contraste mede a diferença de luminosidade entre duas cores, normalmente a cor de um texto e a do seu fundo. Quanto maior o número, mais fácil é distinguir o texto do fundo. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG), o padrão internacional de referência, estabelecem razões mínimas conforme o tamanho do texto e o nível de conformidade desejado.

Um contraste insuficiente não é só um problema estético: dificulta a leitura para pessoas com baixa visão, deficiências na percepção das cores ou simplesmente para qualquer um que use o celular sob o sol. Cumprir as WCAG é também um requisito legal em muitos países, sob normas de acessibilidade digital.

Os níveis AA e AAA explicados

AA (mínimo recomendado)

É o nível exigido pela maioria das normas de acessibilidade, incluindo o Ato Europeu de Acessibilidade.

Texto normal
4,5:1
Texto grande / UI
3:1

AAA (nível reforçado)

Recomendado para conteúdo crítico ou públicos com necessidades de acessibilidade maiores, mas nem sempre exigível em todo o site.

Texto normal
7:1
Texto grande
4,5:1

Como verificar o contraste em três passos

  1. Escolha texto e fundo

    Clique em Cor do texto ou Cor de fundo e ajuste-a com o seletor, o conta-gotas ou digitando o código. Aceita transparência.

  2. Confira cada uso

    Você verá a razão e se passa em AA e AAA para texto normal, texto grande e elementos de interface como ícones ou bordas de campos.

  3. Aplique uma sugestão

    Se não passar, a ferramenta propõe a cor mais parecida que passa, com o mesmo matiz. Um clique e pronto.

O que conta como texto grande

As WCAG consideram texto grande aquele com pelo menos 18 pontos (24 px) ou 14 pontos em negrito (cerca de 18,66 px). Como os traços são mais grossos, lê-se com menos contraste: basta 3:1 para AA e 4,5:1 para AAA.

Todo o resto é texto normal, que precisa de 4,5:1 para AA e 7:1 para AAA. Atenção aos pequenos textos de apoio, como notas, rótulos ou legendas: costumam ser os que falham.

Contraste em botões, ícones e campos

O contraste não é só coisa do texto. As WCAG pedem um mínimo de 3:1 para os elementos de interface que é preciso ver para usar a página: a borda de um campo de formulário, os ícones que transmitem informação, o indicador de foco ou os estados de um controle.

Uma borda cinza muito clara sobre branco pode parecer elegante, mas muitas pessoas não vão distinguir onde está o campo.

Não precisam cumprir

  • Logotipos
  • Texto decorativo
  • Controles desativados
  • Imagens e fotos

Como se calcula a razão de contraste

A razão compara a luminância relativa das duas cores, ou seja, quanta luz cada uma emite depois de corrigida a resposta do olho.

L1
Luminância relativa da cor mais clara, de 0 (preto) a 1 (branco).
L2
Luminância relativa da cor mais escura.
0.05
Compensa a luz ambiente refletida na tela. Por isso o máximo é 21:1 (branco sobre preto) e o mínimo 1:1 (a mesma cor).

(L1 + 0.05) / (L2 + 0.05)

Aa(1 + 0.05) / (0 + 0.05) = 21:1

Perguntas frequentes

Para texto normal, uma razão de pelo menos 4,5:1 cumpre o nível AA das WCAG, o mínimo recomendado. Para um contraste reforçado (nível AAA), é preciso 7:1.

AA é o nível mínimo exigido pela maioria das normas de acessibilidade. AAA é um nível reforçado, mais exigente, recomendado para conteúdo crítico mas nem sempre obrigatório em todo um site.

Porque o tamanho e a espessura das letras grandes já facilitam a leitura, então as WCAG permitem uma razão menor (3:1 em AA) frente aos 4,5:1 exigidos para texto normal.

O que tem pelo menos 18 pontos (24 px) ou 14 pontos em negrito (cerca de 18,66 px). Precisa de 3:1 para AA e 4,5:1 para AAA, frente a 4,5:1 e 7:1 do texto normal.

Em muitos países sim, especialmente para a administração pública e, cada vez mais, para empresas privadas sob normas como o Ato Europeu de Acessibilidade. Mesmo sem obrigação legal, cumprir as WCAG melhora a experiência de todos os seus usuários.

É calculada a partir da luminância relativa das duas cores, uma medida de quanta luz refletem, e expressa como uma proporção entre 1:1 (sem contraste, mesma cor) e 21:1 (o máximo possível, branco puro sobre preto puro).

Não. As WCAG isentam logotipos, texto decorativo e controles desativados. Mas aplicam-se a botões ativos, campos de formulário, ícones com significado e ao indicador de foco, que precisam de pelo menos 3:1.

A razão é calculada sobre a cor que realmente se vê: um texto semitransparente se mistura com o fundo antes da medição, e um fundo semitransparente se mistura com branco. Você pode adicionar transparência no campo de cor da ferramenta.

Use as sugestões da ferramenta: ela propõe a cor de texto ou de fundo mais parecida que cumpre AA ou AAA, mantendo o mesmo matiz, para que sua marca não mude. Você também pode explorar variações da cor no seletor de cor.

Mais ferramentas