Verificador de contraste de cores
Teste qualquer combinação de cores segundo as normas WCAG 2.1. Veja como suas cores aparecem para pessoas com deficiência de visão de cores — na hora, de graça, no seu navegador.
Visão de cores normal
Como esta combinação aparece com deficiência de visão de cores
protanopia
Ratio: 17.93:1 ✓ AA
deuteranopia
Ratio: 17.93:1 ✓ AA
tritanopia
Ratio: 17.93:1 ✓ AA
Entendendo contraste de cor e acessibilidade
Normas de contraste da WCAG
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem razões mínimas de contraste para garantir que o texto seja legível por pessoas com baixa visão ou daltonismo:
- 4.5:1 WCAG AA — texto normal (abaixo de 18pt)
- 3.0:1 WCAG AA — texto grande (18pt+ ou 14pt em negrito)
- 7.0:1 WCAG AAA — texto normal (reforçado)
- 4.5:1 WCAG AAA — texto grande (reforçado)
Por que simular daltonismo importa
Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de deficiência de visão de cores. Mesmo que a sua combinação passe nas razões de contraste da WCAG para visão normal, ela pode falhar para quem tem protanopia ou deuteranopia — pessoas que enxergam vermelhos e verdes de forma muito diferente. Teste sempre seus projetos com simulação de daltonismo.
Luminância é o canal que sempre sobrevive
A cor tem dois componentes em que um designer pode se apoiar: matiz e claridade. Apenas um deles é confiável para todo o público.
A discriminação de matiz varia enormemente. Cerca de um homem em cada doze tem deficiência vermelho-verde, e para ele uma diferença de matiz que parece óbvia para você pode não carregar informação alguma. A discriminação de claridade é bem mais uniforme. Uma pessoa com deficiência da visão de cores, uma pessoa com acuidade reduzida, uma pessoa com a tela do celular lavada sob sol forte e uma pessoa com visão inteiramente típica percebem todas uma grande diferença de claridade como uma grande diferença.
É por isso que a razão de contraste é a métrica de acessibilidade que sustenta a estrutura. Ela mede a relação de claridade entre duas cores ignorando o matiz por completo — que é exatamente o que se quer, porque diz o que resta quando o canal do matiz não é confiável.
A razão vai de 1:1, em que duas cores têm luminância relativa idêntica e a fronteira entre elas é invisível para todo mundo, até 21:1 para preto puro sobre branco puro. O cálculo é definido com precisão nas WCAG: converter cada canal sRGB para luz linear, ponderar os canais pela contribuição à luminância percebida e comparar o resultado mais claro com o mais escuro.
Os limiares e o que há por trás deles
4,5:1 — texto normal (WCAG AA). A base para o corpo de texto. O número deriva da perda de sensibilidade ao contraste associada a uma acuidade em torno de 20/40, comum em adultos mais velhos e corrigível, mas frequentemente não corrigida.
3:1 — texto grande (WCAG AA). Aplica-se a partir de 18 pt regular ou 14 pt em negrito. Caracteres maiores têm traços mais grossos e continuam legíveis com contraste menor.
3:1 — contraste não textual (WCAG AA). Cobre componentes de interface e gráficos significativos: bordas de campos, estados de alternadores, indicadores de foco, ícones que transmitem informação e as partes essenciais de um gráfico. É o critério mais esquecido, e costuma ser onde uma interface visualmente elegante e de baixo contraste falha numa auditoria.
7:1 e 4,5:1 — texto normal e grande (WCAG AAA). Um nível mais rigoroso, voltado a uma acuidade em torno de 20/80. Vale adotar para leitura longa mesmo quando não é obrigatório.
Contraste é necessário, não suficiente
O erro mais comum no trabalho com paletas acessíveis é tratar uma razão de contraste aprovada como o fim do trabalho. Há duas perguntas independentes a responder:
- Cada cor é legível contra seu fundo? Isso é contraste, e este verificador responde.
- Cores que significam coisas diferentes são distinguíveis entre si? Isso é separação de matiz, e a razão de contraste não diz nada a respeito.
Um gráfico com uma série vermelha e outra verde pode passar no contraste com folga — ambas são escuras sobre fundo branco — e ser completamente ilegível para um deuteranope, porque as duas séries são indistinguíveis entre si. Passe essas paletas também pelo simulador de visão de cores.
E sempre que a cor carregar significado, acrescente uma segunda pista. O critério de uso de cor das WCAG exige isso, e a técnica G111 descreve o procedimento padrão: combinar cor com padrão, forma, posição ou um rótulo explícito. Na prática, isso significa rotular diretamente as séries de um gráfico em vez de usar legenda de cores, colocar um ícone ao lado de uma mensagem de erro vermelha, sublinhar links em linha e diferenciar pela forma os estados de sucesso e de falha.
Trabalhando com o verificador
Informe uma cor de primeiro plano e uma de fundo, e a ferramenta relata a razão e quais limiares ela atende. Alguns hábitos a tornam mais útil:
- Teste o par real. Sobreposições semitransparentes, gradientes e imagens de fundo fazem com que o fundo efetivo não seja a cor da sua folha de estilo. Amostre o que de fato é renderizado.
- Teste os dois temas. A luminância não inverte de forma limpa; uma paleta escura precisa da própria verificação.
- Num gradiente, teste o pior caso, não a média.
- Inclua os estados desabilitado e de espaço reservado. Eles ainda são lidos.
- Verifique indicadores de foco contra todas as superfícies em que aparecem. Um anel de foco que atende 3:1 no branco pode sumir sobre um cartão.
Para o quadro completo, projetar para o daltonismo cobre a construção de paletas, e como tornar gráficos acessíveis trata especificamente da visualização de dados.
Ficou com dúvidas?
Perguntas frequentes
Tudo o que você precisa saber sobre testes de daltonismo, como funcionam e o que fazer com o seu resultado.
O que 4,5:1 e 3:1 significam de fato?
São razões de contraste de luminância entre um primeiro plano e um fundo, numa escala que vai de 1:1 (idênticos) a 21:1 (preto sobre branco). As WCAG 2.2 pedem ao menos 4,5:1 para texto normal e permitem 3:1 para texto grande — a partir de 18 pt, ou 14 pt em negrito — porque caracteres maiores têm traços mais grossos e sobrevivem a contraste menor. Elementos não textuais que carregam significado, como ícones, bordas de campos e indicadores de foco, também precisam de 3:1.
Por que contraste importa especificamente para daltonismo?
Porque o contraste de luminância é o canal que sobrevive quando a discriminação de matiz não sobrevive. Se dois elementos diferem apenas em matiz e quase nada em claridade, quem comprime essa diferença de matiz fica sem nada. Contraste de luminância adequado faz a distinção permanecer visível independentemente de como a cor é processada. É a propriedade de acessibilidade mais robusta que você pode dar a um par de cores.
Minhas cores passam em 4,5:1, mas o design ainda falha para quem é daltônico. Como?
Passar no contraste contra o fundo é necessário, mas não suficiente. Uma linha vermelha e uma verde num gráfico podem ter ótimo contraste contra o branco e ainda assim serem indistinguíveis entre si. Contraste é medido de primeiro plano para fundo; distinguibilidade é uma questão de primeiro plano contra primeiro plano. Verifique as duas coisas e dê a toda distinção codificada por cor uma pista não cromática.
A razão muda no modo escuro?
A fórmula não, mas seus resultados sim. O contraste é calculado a partir da luminância relativa, então inverter uma paleta produz razões diferentes, e não espelhadas. Um par que passa no branco pode falhar no quase preto, sobretudo azuis e roxos saturados, cuja luminância já é baixa. Teste os dois temas.
Vale a pena mirar o nível AAA?
É um nível mais rigoroso — 7:1 para texto normal e 4,5:1 para texto grande — e é de fato mais legível, especialmente para baixa visão e sob iluminação ruim. A maioria das organizações define AA como base de conformidade e trata AAA como meta para o corpo de texto e a leitura longa. AAA raramente é exigência legal.
Quais elementos são isentos?
As WCAG isentam conteúdo puramente decorativo, texto que faz parte de um controle inativo, texto em um logotipo e texto que faz parte de uma imagem com outro conteúdo visual significativo. As isenções são mais estreitas do que se supõe: texto de espaço reservado, controles que parecem desabilitados mas estão ativos e texto de ajuda de baixo contraste são frequentemente e erroneamente tratados como isentos.
Ainda tem dúvidas? Fale conosco →