Verificador de contraste de cores

Sobre o verificador de contraste de cores

Este verificador de contraste de cores gratuito mede a relação de contraste entre uma cor de texto e uma cor de fundo, e diz se ela atende às diretrizes WCAG AA e AAA para texto normal e texto grande.

Ele funciona no seu navegador — nada é enviado.

O que a relação significa

A relação de contraste compara a luminância relativa de duas cores — quanta luz cada uma emite ou reflete — em uma escala de 1:1 a 21:1.

• 1:1 — cores idênticas, o texto fica invisível
• 21:1 — preto puro sobre branco puro, o máximo possível
• 4.5:1 — o mínimo para texto corrido comum segundo a WCAG AA

O detalhe importante é que o cálculo usa a luminância, e não o quanto as cores parecem diferentes. Duas cores podem parecer bastante distintas e ainda assim reprovar. Vermelho sobre verde é o exemplo clássico: visualmente marcante, com luminância quase igual, e quase ilegível para muitas pessoas.

É também por isso que você não pode julgar o contraste a olho nu. Quem projeta trabalha em bons monitores, sob luz controlada e com olhos jovens, e o cinza-claro que parece elegante no estúdio desaparece num telefone sob o sol.

Os limiares

A WCAG define dois níveis, e a exigência depende do tamanho do texto.

Nível AA — o alvo habitual e o que a maioria das leis de acessibilidade referencia:

• 4.5:1 para texto normal
• 3:1 para texto grande
• 3:1 para componentes de interface e gráficos que carregam significado

Nível AAA — um padrão mais rigoroso, adequado a conteúdos voltados a leitores com baixa visão:

• 7:1 para texto normal
• 4.5:1 para texto grande

Texto grande significa 18pt (24px) ou maior, ou 14pt (18.66px) em negrito ou maior. Letras maiores têm traços mais espessos, por isso suportam um contraste menor.

AA é o alvo realista para a maioria dos sites. AAA é difícil de atingir em todo um projeto e não é esperado para conteúdo de uso geral.

Por que isso afeta muito mais gente do que você imagina

É fácil arquivar o contraste como "caso extremo". Os números dizem o contrário.

Cerca de 1 em cada 12 homens e 1 em cada 200 mulheres têm alguma forma de deficiência na visão de cores — algo como 300 milhões de pessoas no mundo. A do tipo vermelho-verde é de longe a mais comum.

Quase todo mundo acima dos 40 experimenta uma queda na sensibilidade ao contraste, e o cristalino do olho amarela com a idade, mudando a forma como os azuis são percebidos.

Todo mundo, às vezes. Falhas de contraste atingem pessoas de visão perfeita lendo ao ar livre, com a tela escurecida, num monitor barato, ou através de uma tela de celular suja dentro do ônibus. Aqui, melhorias de acessibilidade são simplesmente melhorias de legibilidade para todos.

Há também uma dimensão jurídica. O nível WCAG 2.1 AA é referenciado na prática pelo Americans with Disabilities Act, pela Section 508 nas compras federais dos EUA, pelo European Accessibility Act e por regras equivalentes no Reino Unido, no Canadá e na Austrália. O contraste está entre as falhas mais citadas em reclamações de acessibilidade, em grande parte porque é muito fácil de medir.

Onde os projetos costumam falhar

• Texto de espaço reservado em cinza-claro em campos de formulário — extremamente comum e quase sempre reprovado
• Texto branco sobre uma fotografia — a relação muda ao longo da imagem; acrescente uma sobreposição ou um véu escuro
• Cores da marca usadas como texto — um azul ou laranja corporativo de tom médio sobre branco costuma ficar perto de 3:1
• Estados desativados — isentos da exigência, mas ainda assim vale mantê-los legíveis
• Links distinguidos apenas pela cor — se um link tem a mesma claridade do texto ao redor, sublinhe-o
• Texto branco sobre amarelo, ou cinza sobre cinza — os culpados de sempre
• Modo escuro — branco puro sobre preto puro é tecnicamente 21:1, mas causa halação; cores levemente suavizadas leem-se melhor
• Mensagens de erro em vermelho sobre fundo branco — muitas vezes abaixo de 4.5:1 justamente na mensagem que mais importa

Corrigindo um par reprovado

Quando uma combinação reprova, altere a claridade em vez do matiz. Normalmente dá para manter uma cor de marca reconhecível e ainda assim escurecê-la ou clareá-la o suficiente para aprovar.

Abordagens práticas:

Reserve a cor da marca para elementos grandes — títulos, botões, ícones — onde o limiar é 3:1, e use uma variante mais escura para o texto corrido.

Ajuste apenas um dos lados. Escurecer o texto costuma ser menos disruptivo do que mudar o fundo.

Em imagens, acrescente um véu — uma camada escura semitransparente entre a foto e o texto. Ela garante a relação independentemente do que a imagem mostra.

Não dependa apenas da cor para transmitir significado. Acrescente um ícone, um rótulo ou um sublinhado, para que a informação sobreviva para quem não consegue distinguir as cores de forma alguma.

Como usar

• Escolha uma cor de texto e uma cor de fundo
• Veja a relação de contraste e os selos de aprovado ou reprovado AA / AAA
• Leia a pré-visualização ao vivo para julgar por conta própria e depois ajuste as cores

Bom saber

• Teste as cores reais, incluindo qualquer opacidade. Texto a 70% de opacidade é, na prática, outra cor diante do seu fundo.
• Verifique os dois temas. Uma paleta que passa no modo claro pode reprovar no modo escuro.
• Logotipos são isentos da exigência de contraste, assim como texto incidental e decorativo.
• Fontes finas precisam de mais contraste na prática do que a relação sugere. O padrão não mede a espessura do traço, mas seus leitores percebem.
• Verifique num telefone à luz do dia, se puder. É um teste mais honesto do que qualquer monitor.
• Passar é um piso, não uma meta. 4.5:1 é o mínimo aceitável, não o objetivo.

Perguntas frequentes

O que é uma boa relação de contraste?

Para texto corrido comum, pelo menos 4.5:1 para atender à WCAG AA — o nível que a maioria das leis de acessibilidade referencia. Texto grande, ou seja, 18pt/24px ou 14pt/18.66px em negrito e acima, precisa de 3:1. O nível AAA, mais rigoroso, pede 7:1 em texto normal. Trate esses valores como mínimos e não como metas; a leitura confortável costuma ficar bem acima deles.

Qual é a diferença entre WCAG AA e AAA?

AA é o padrão prático que a maioria das regulamentações e organizações adota, exigindo 4.5:1 para texto normal e 3:1 para texto grande. AAA é mais rigoroso, com 7:1 e 4.5:1, e destina-se a conteúdos voltados especificamente a leitores com baixa visão. AAA é difícil de alcançar em todo um projeto e não é esperado em sites de uso geral.

Por que minha combinação de cores reprova se para mim ela parece boa?

Porque o contraste é calculado a partir da luminância, e não do quanto duas cores parecem diferentes. Vermelho e verde parecem bem distintos mas têm luminância semelhante, e é por isso que esse par reprova. O julgamento pessoal também não é confiável: quem projeta costuma trabalhar em boas telas, sob iluminação controlada e com boa visão, condições que a maioria dos leitores não tem.

O contraste importa para imagens e ícones?

Sim. A WCAG exige 3:1 para componentes de interface e para gráficos que carregam significado, como ícones que indicam um estado ou a borda de um campo de formulário. Imagens puramente decorativas e logotipos são isentos. Texto colocado sobre uma fotografia é o problema comum, já que a relação muda ao longo da imagem — uma sobreposição semitransparente resolve.

Como corrijo um par de cores reprovado sem perder a cor da minha marca?

Ajuste a claridade em vez do matiz. Uma versão mais escura ou mais clara da mesma cor normalmente continua reconhecível como cor da marca e ainda assim ultrapassa o limiar. Você também pode manter a original para títulos, botões e ícones, onde só 3:1 é exigido, e usar uma variante mais escura no texto corrido, onde vale 4.5:1.

Preto puro sobre branco puro é a melhor escolha?

É o máximo, com 21:1, mas não necessariamente o mais confortável. Um contraste muito alto pode causar halação — um efeito de brilho ao redor das letras — sobretudo no modo escuro e para alguns leitores com dislexia ou astigmatismo. Um cinza bem escuro sobre um branco quebrado, ou um branco suavizado sobre um cinza escuro, costuma ler-se com mais conforto e ainda passa com folga.

Minhas escolhas de cor são enviadas para algum lugar?

Não. A relação é calculada no seu navegador conforme você escolhe as cores, portanto nada é transmitido nem armazenado, e a ferramenta funciona offline.

Ferramentas relacionadas

• Seletor de cores — encontre e converta cores entre HEX, RGB e HSL
• Seletor de cor de imagem — extraia uma cor de uma imagem
• Paleta de cores a partir de imagem — monte uma paleta e depois teste-a aqui
• Gerador de gradiente CSS — verifique o contraste do texto nas duas pontas de um gradiente