Por que texto corrido de 14px nunca passa no APCA

Na primeira vez que uma ferramenta de contraste diz que texto preto sobre fundo branco reprova, você imagina que a ferramenta está com defeito. Normalmente não está. Se o texto tem 14px em peso regular, o APCA o considera inutilizável, sejam quais forem as cores escolhidas.

Isso surpreende o bastante para merecer uma explicação cuidadosa.

Contraste não é só uma questão de cor

A WCAG 2 trata o contraste como uma propriedade de duas cores. Você fornece um primeiro plano e um fundo, e ela devolve uma taxa, sem saber nada sobre como o texto vai ser composto.

O APCA trata o contraste como uma propriedade de duas cores e da forma dos glifos desenhados nelas. Isso está mais perto de como a visão funciona. O que chega ao seu olho não é um par de cores abstrato, e sim uma quantidade de tinta organizada em traços. Traços finos em tamanhos pequenos entregam muito pouca tinta, e o antialiasing os clareia ainda mais nas bordas.

Por isso, os limites do APCA acompanham a tipografia. A tabela de referência dele indica, para cada nível de contraste, o menor tamanho de fonte utilizável em cada peso:

Lc	Peso 300	Peso 400	Peso 500	Peso 700
90	21px	16px	15.5px	14px
75	24px	18px	16px	14px
60	42px	24px	21px	16px
45	72px	42px	32px	24px

Siga a coluna do peso 400. Em Lc 90, que está perto do máximo possível, já que preto puro sobre branco puro dá Lc 106, o menor tamanho utilizável é 16px.

Não existe linha em que 14px no peso 400 apareça. Aumentar o contraste não resolve, porque 16px já é o piso no maior contraste que a tela consegue produzir.

O que você pode fazer no lugar

Use 16px. A solução mais simples, e a que a maior parte do texto corrido já deveria ter. 16px é o padrão sensato para texto corrido há uma década.

Mantenha 14px e aumente o peso. Veja a coluna do peso 700: 14px é utilizável em Lc 90 e Lc 75. Um rótulo de 14px em negrito com contraste forte está aprovado pelo APCA. Muitas vezes essa é a resposta certa para rótulos de interface em que o espaço vertical é realmente limitado.

Repense se aquilo precisa ser texto. Um horário de 14px em cinza-claro que ninguém consegue ler não está transmitindo informação. Ou ele importa, e então deve ficar legível, ou não importa, e então deve sair.

O corolário incômodo

Depois que você aceita a tabela, muitas convenções comuns de interface deixam de ser defensáveis.

O rótulo em caixa-alta de 11px ou 12px, num cinza apagado, está em todo design system moderno. Pelo APCA, 12px no peso 400 não tem contraste que passe, e mesmo no peso 700 exige um Lc altíssimo. Rodamos essa verificação na nossa própria interface enquanto construíamos este site e tivemos de passar os rótulos de 11px para 13px e aumentar o peso. A ferramenta encontrou o problema na própria interface.

O texto de placeholder é o outro infrator comum: pequeno, claro e muitas vezes o único rótulo que um campo tem.

A WCAG 2 não está errada, só incompleta

Significa que a WCAG 2 é incompleta neste eixo específico, algo que seus autores sabiam. Modelar tamanho e peso em 2008 exigiria dados e capacidade de cálculo que não eram viáveis na época. Uma razão entre duas luminâncias era uma aproximação razoável, e fez um bem enorme.

Mas você precisa saber o que ela não enxerga. Uma legenda de 12px e um título de 32px nas mesmas cores recebem a mesma nota na WCAG, e só um deles é legível.

O que fazer na prática

Continue registrando a taxa da WCAG, porque é com ela que a conformidade é medida. Use o APCA para verificar se aquilo pode mesmo ser lido no tamanho em que você vai publicar.

E, quando o APCA reprovar um par de cores num tamanho pequeno, resista ao impulso de escurecer a cor. Consulte a tabela primeiro. Muitas vezes a resposta não é outra cor, e sim 2px a mais, ou um peso acima.

Nosso verificador de contraste mostra os dois números no tamanho e no peso que você escolher e, quando um tamanho é inutilizável com qualquer contraste, diz isso diretamente, em vez de apontar uma reprovação que você não consegue corrigir mexendo na cor.