Qual taxa de contraste você realmente precisa?

Os limites são simples o bastante para decorar. O que dá trabalho é saber qual deles vale para um determinado elemento, e há quatro regras que muita gente entende errado.

Os números

O quê	AA	AAA
Texto corrido	4.5:1	7:1
Texto grande	3:1	4.5:1
Componentes de interface e gráficos com significado	3:1	sem nível AAA
Controles desativados, elementos decorativos, logotipos	isentos	isentos

O AA é o nível exigido de quase todo mundo. A ADA, o European Accessibility Act e regimes equivalentes fazem referência à WCAG 2.x no nível AA. O AAA costuma ser buscado de forma seletiva, não no site inteiro; os próprios autores da WCAG dizem que ele não é alcançável para todo tipo de conteúdo.

Regra 1: “grande” tem uma definição precisa

Texto grande significa 24px ou mais, ou 18.66px ou mais se o peso for 700 ou superior.

Esses números vêm da conversão de 18pt e de 14pt em negrito, com uma referência de 96dpi. O limite para negrito é menor porque um traço mais pesado põe mais tinta na tela no mesmo tamanho.

O erro comum é supor que qualquer título se qualifica. Um subtítulo de 20px em peso regular não é texto grande. Ele precisa de 4.5:1, igual ao texto corrido.

Regra 2: componentes de interface também precisam de contraste

O Critério de Sucesso 1.4.11, incluído na WCAG 2.1, é o que mais passa totalmente despercebido. Ele exige 3:1 para a informação visual necessária para identificar um componente e o estado dele.

Na prática:

• Bordas de campos de formulário, em relação ao fundo ao redor
• Indicadores de foco
• Contornos de toggles e checkboxes nos dois estados
• Ícones que carregam significado sozinhos
• As partes com significado de um gráfico: uma linha, uma barra, um ponto de dados

Ele não se aplica a gráficos decorativos nem a partes de um componente que não são necessárias para entendê-lo. Uma sombra sutil sob um card não tem problema. Já a borda do card, se for a única coisa que mostra onde está o campo, tem.

Esse critério pega muitos designs que, fora isso, são cuidadosos. Bordas de campo em cinza-claro #e5e7eb sobre branco ficam em cerca de 1.3:1: um padrão comum e uma reprovação clara.

Regra 3: texto de placeholder não é isento

Controles desativados são isentos dos requisitos de contraste. O texto de placeholder não é, e os dois são confundidos o tempo todo.

O placeholder é conteúdo real apresentado ao usuário, então precisa de 4.5:1 como qualquer outro texto corrido. O placeholder típico, em cinza-claro, nem chega perto.

A melhor solução costuma ser estrutural, e não de cor: se o placeholder está fazendo o papel de um rótulo, ele deveria ser um rótulo. Placeholders somem assim que a pessoa começa a digitar, que é exatamente quando mais se precisa lembrar para que servia o campo.

Regra 4: texto sobre imagem precisa de um fundo definido

Se o texto fica sobre uma foto ou um degradê, não existe uma única cor de fundo para medir, e a taxa muda conforme a imagem muda.

Você precisa criar um fundo determinado: uma camada sólida, uma sobreposição em degradê forte o suficiente para garantir o pior caso, ou um contêiner para o texto. Meça contra o ponto mais claro da área atrás do texto, não contra a média.

O mesmo raciocínio explica por que superfícies muito translúcidas e desfocadas são difíceis de deixar em conformidade: o fundo delas é o que estiver rolando por baixo no momento, então a taxa não é uma propriedade fixa.

Um limite não é uma nota

Passar de 4.5:1 por 0.01 não é muito melhor do que ficar 0.01 abaixo. O número é um piso, não uma nota.

Se um par passa raspando, trate isso como um alerta de que ele vai reprovar assim que alguém o usar um pouco menor, ou que um designer deixar o cinza um tom mais claro. Deixe margem em tudo o que você espera reaproveitar.

O que a taxa não consegue dizer

Duas coisas ficam totalmente fora desse modelo.

Ela não enxerga a tipografia. Uma legenda de 12px com traço fino e um título de 32px em negrito, nas mesmas cores, recebem a mesma taxa, e só um deles é legível. O APCA modela isso; a WCAG 2 não.

Ela não diz se duas cores de primeiro plano podem ser distinguidas uma da outra. É isso que quebra gráficos e cores de status para pessoas daltônicas, e nenhum teste de contraste pega o problema, porque as duas cores nunca são comparadas entre si.

As duas lacunas são reais, e vale a pena verificar cada uma separadamente depois que as taxas estiverem em ordem.

Nosso verificador de contraste mostra todos os limites de uma vez (AA e AAA, texto corrido e grande, além da regra de componentes), para você ver o que um par atende e o que não atende sem trocar de modo.