Algoritmos de Contraste de Cores: WCAG 2 vs APCA

Quando um designer diz "este texto tem contraste suficiente", geralmente quer dizer um número: uma taxa como 4,5:1 calculada por algum algoritmo. Mas nem todos os algoritmos de contraste são iguais. O incorporado no WCAG 2 tem sido o padrão da indústria desde 2008, mas tem limitações documentadas. O APCA — Advanced Perceptual Contrast Algorithm — foi desenvolvido como um substituto moderno e é central para a especificação de rascunho do WCAG 3.0.

Compreender como esses algoritmos funcionam, onde concordam e onde divergem é essencial para qualquer designer ou desenvolvedor que se preocupa com acessibilidade. Este tutorial percorre ambos desde os princípios fundamentais.

Fórmula de Luminância Relativa do WCAG 2

O algoritmo de contraste do WCAG 2 calcula a taxa entre a luminância relativa de duas cores. A luminância relativa é uma medida da quantidade de luz que uma cor reflete, normalizada de forma que o branco absoluto seja 1,0 e o preto absoluto seja 0,0.

Passo 1: Linearizar os Valores sRGB

Os valores de cor sRGB são codificados com gamma — eles não são proporcionais à luz física. Antes de calcular a luminância, você deve linearizar cada canal.

Para cada valor de canal (R, G ou B) expresso como decimal de 0 a 1:

se canal <= 0,04045:
    linear = canal / 12,92
senão:
    linear = ((canal + 0,055) / 1,055) ^ 2,4

Passo 2: Calcular a Luminância Relativa

Aplique os coeficientes de luminância CIE, que refletem a diferente sensibilidade do olho à luz vermelha, verde e azul:

L = 0,2126 × R_linear + 0,7152 × G_linear + 0,0722 × B_linear

A ponderação revela algo importante: o verde contribui com 71,5% da luminância percebida, o vermelho cerca de 21,3% e o azul apenas 7,2%. Um azul vívido #0000FF tem luminância relativa de apenas 0,072, mesmo que pareça "brilhante" a uma observação casual.

Passo 3: Calcular a Taxa de Contraste

Dadas a luminância relativa L1 da cor mais clara e L2 da cor mais escura:

taxa de contraste = (L1 + 0,05) / (L2 + 0,05)

O deslocamento de 0,05 contabiliza a luz ambiente refletida de uma tela (brilho velado). Ele garante que a taxa nunca divida por zero (o preto puro tem L=0, mas recebe luminância de 0,05 para o denominador).

Um Exemplo Calculado

Para branco (#FFFFFF) em uma ardósia escura (#1E293B):

1. Branco: L = 1,0 (todos os canais totalmente lineares)
2. #1E293B em RGB: (30, 41, 59) → normalizado: (0,118, 0,161, 0,231) → linearizado e ponderado por luminância: L ≈ 0,021
3. Taxa de contraste: (1,0 + 0,05) / (0,021 + 0,05) = 1,05 / 0,071 ≈ 14,8:1

Uma taxa de 14,8:1 passa confortavelmente em todos os níveis WCAG. Verifique qualquer par instantaneamente usando o Verificador de Contraste.

Limites do WCAG 2

Limitações Conhecidas do WCAG 2

A fórmula do WCAG 2 tem vários problemas bem documentados que afetam a usabilidade no mundo real:

1. O texto claro em fundos escuros é excessivamente penalizado. A fórmula é simétrica: ela não se importa com qual cor é primeiro plano e qual é fundo. Mas a visão humana não é simétrica. Geralmente lemos texto escuro em fundos claros mais facilmente do que texto claro em fundos escuros, especialmente em tamanhos pequenos. O WCAG 2 não consegue distinguir entre esses casos.

2. Texto muito escuro ou muito claro pode reprovar mesmo com alto contraste de luminância. Um quase-preto #0A0A0A em preto puro #000000 tem uma taxa muito baixa (cerca de 1,1:1), o que faz sentido. Mas o WCAG 2 também tem dificuldades com certas combinações de tons médios que o olho humano pode ler perfeitamente bem.

3. O peso e o tamanho da fonte são abordados apenas grosseiramente. O WCAG 2 tem dois grupos: texto "normal" e "grande", com negrito tratado como modificador para o limite de 14pt. Na realidade, a legibilidade do contraste é uma função suave do tamanho, peso e qualidade de renderização da fonte. Uma fonte de peso 700 a 16px com 4,5:1 se lê de forma muito diferente de uma fonte de peso 300 a 12px com 4,5:1.

4. A fórmula foi construída para monitores de desktop do início dos anos 2000. Telas OLED modernas, displays HDR e condições variáveis de iluminação ambiente não são contabilizados.

APCA: Advanced Perceptual Contrast Algorithm

O APCA foi desenvolvido por Andrew Somers sob o Accessibility Guidelines Working Group como o mecanismo de contraste para o WCAG 3.0. Ele adota uma abordagem fundamentalmente diferente: em vez de medir uma taxa de luminância, calcula uma diferença de luminosidade calibrada para a percepção visual humana de texto.

Diferenças Principais em Relação ao WCAG 2

Como o APCA Funciona

Passo 1: Linearizar (semelhante ao WCAG 2)

O APCA usa uma linearização ligeiramente modificada, elevando os valores à potência de 2,4 (mesmo expoente que o sRGB):

Y = (sRGB / 255) ^ 2,4  (simplificado)

Passo 2: Calcular Luminância

O APCA usa os mesmos coeficientes CIE que o WCAG 2:

Y = 0,2126 × R + 0,7152 × G + 0,0722 × B

Passo 3: Aplicar o Soft Clamp do APCA

O APCA aplica um "soft clamp" a luminâncias baixas para simular como nossos olhos se adaptam em condições de pouca luz:

se Y <= 0,022:
    Y_ajustado = Y + (0,022 - Y) ^ 1,414

Passo 4: Calcular o SAPC (Spatial Average Polarity Contrast)

O APCA usa uma diferença assinada que distingue entre texto escuro sobre claro (Lc positivo) e texto claro sobre escuro (Lc negativo):

se Y_fundo > Y_texto:
    # Texto escuro em fundo claro (polaridade: +)
    Lc = (Y_fundo ^ 0,56 - Y_texto ^ 0,57) × 1,14
senão:
    # Texto claro em fundo escuro (polaridade: −)
    Lc = (Y_fundo ^ 0,65 - Y_texto ^ 0,62) × 1,14

Os diferentes expoentes (0,56 vs 0,57 para texto, 0,65 vs 0,62 para fundo) codificam a assimetria empírica entre leitura escuro-sobre-claro vs claro-sobre-escuro.

Lendo os Valores Lc do APCA

A saída é um número assinado. Lc positivo significa texto escuro em fundo claro; Lc negativo significa texto claro em fundo escuro. Para avaliação de usabilidade, use o valor absoluto:

| Valor |Lc| | Usabilidade | |-----------|-----------| | < 30 | Texto é efetivamente invisível | | 30–45 | Adequado apenas para texto decorativo grande e em negrito | | 45–60 | Mínimo para texto de corpo grande (18pt+) | | 60–75 | Aceitável para a maioria do texto de corpo (14pt+ em peso normal) | | 75–90 | Bom contraste para texto de corpo padrão (12pt regular) | | 90+ | Excelente contraste; adequado para texto muito pequeno |

Um Exemplo Calculado

Texto branco #FFFFFF em blue-500 do Tailwind #3B82F6:

• Taxa WCAG 2: aproximadamente 3,0:1 → Reprova no AA para texto normal
• APCA Lc: aproximadamente Lc 57 → Aceitável apenas para texto grande (18pt+)

Ambos os algoritmos concordam que essa combinação é problemática para texto de corpo. Mas o APCA dá mais nuance: em Lc 57, é utilizável para títulos de 18pt, mas não para texto de corpo de 14pt, enquanto o WCAG 2 dá um aprovado/reprovado binário.

Agora compare #1D4ED8 (blue-700) em branco #FFFFFF:

• Taxa WCAG 2: aproximadamente 7,2:1 → Passa no AAA
• APCA Lc: aproximadamente Lc 79 → Bom para texto regular de 12pt+

Comparação Lado a Lado

Onde Concordam

Para a maioria dos casos simples — texto escuro sobre branco, ou texto preto sobre um fundo pastel — o WCAG 2 e o APCA produzem veredictos concordantes. Um par com taxa WCAG de 4,5:1 normalmente corresponde a um valor Lc entre 55 e 70, dependendo da direção.

Onde Divergem

Caso 1: Texto claro em fundos escuros

O WCAG 2 trata branco-sobre-escuro identicamente ao preto-sobre-claro com a mesma taxa. O APCA aplica expoentes diferentes para cada direção. Empiricamente, o APCA é mais permissivo com claro-sobre-escuro em valores Lc altos — uma combinação para a qual o WCAG 2 pode exigir 7:1, o APCA pode classificar como Lc 80 e considerar aceitável para texto de corpo padrão.

Caso 2: Texto pequeno e de peso leve

Uma taxa de 4,5:1 no WCAG 2 supostamente cobre todo o texto normal. Mas o APCA, com sua tabela de consulta de fontes, sinalizaria uma fonte de peso fino (300) de 12px com o mesmo par de 4,5:1 como precisando de Lc 90+ — o que significa que reprova nos critérios do APCA mesmo passando no WCAG 2.

Caso 3: Tipo decorativo grande

Um título em negrito de 48px pode ser lido com contraste muito menor do que o texto de corpo. O limite de "texto grande" de 3:1 do WCAG 2 é um instrumento grosseiro. A escala deslizante do APCA baseada no tamanho e peso da fonte é mais precisa: um título de peso 700 a 32px pode passar em Lc 45, enquanto um título de peso 300 a 32px precisaria de Lc 60.

Exemplos de Pares: Veredicto WCAG 2 vs APCA

Os veredictos se alinham na maioria dos casos práticos. As divergências aparecem nas margens e são mais significativas quando o tamanho e o peso da fonte são considerados.

O Futuro do Contraste no WCAG 3.0

O WCAG 3.0 (atualmente um rascunho de trabalho, ainda não final) substitui o modelo de contraste baseado em taxa por critérios baseados em APCA chamados níveis de conformidade Bronze/Prata/Ouro. As mudanças principais:

1. Requisitos conscientes de fonte: Os valores mínimos de Lc dependem do tamanho e peso da fonte. Não há um único número; em vez disso, uma tabela de consulta mapeia (tamanho, peso, uso) para um Lc mínimo.
2. Contraste direcional: Claro-sobre-escuro e escuro-sobre-claro são avaliados de forma diferente.
3. Elementos não textuais: Diferentes requisitos para ícones, componentes de UI e gráficos decorativos.
4. Escala suave: O aprovado/reprovado binário do WCAG 2 é substituído por um modelo de conformidade mais granular.

O WCAG 3.0 está em rascunho desde 2021 e não se espera que se torne uma recomendação finalizada antes de pelo menos 2026–2027. Os requisitos legais (ADA, EN 301 549, AODA) atualmente referenciam o WCAG 2.1 AA ou 2.2 AA, então esses permanecem o padrão vinculativo para fins de conformidade.

Qual Usar Hoje

Para conformidade e defensibilidade legal: use o WCAG 2.1 AA.

Se você precisar demonstrar conformidade com leis de acessibilidade, passar por auditorias automatizadas ou satisfazer um requisito de aquisição governamental, o WCAG 2.1 (ou 2.2) AA é o padrão correto. Todo auditor, toda ferramenta automatizada e todo advogado entende 4,5:1.

Para melhores resultados de design: use o APCA como suplemento.

O APCA fornece informações mais acionáveis. Se você tem uma combinação que passa no WCAG 2 com 4,5:1, mas usa uma fonte de peso fino a 12px, o APCA irá sinalizá-la como marginal. Use o APCA para capturar casos onde o WCAG 2 dá um falso positivo.

Fluxo de trabalho prático: 1. Verifique a taxa WCAG 2 para conformidade usando o Verificador de Contraste 2. Se uma combinação for marginal (4,5:1–5,5:1), considere também o tamanho e peso da fonte 3. Use o APCA Lc como sinal adicional — se estiver abaixo de 60 para texto de corpo, reconsidere mesmo que o WCAG 2 passe 4. Para projetos criativos e sistemas de design não sujeitos a conformidade estrita, o APCA é a melhor ferramenta de design

Conclusões Principais

• O WCAG 2 calcula uma taxa de luminância usando valores sRGB linearizados e os coeficientes CIE (0,2126 R + 0,7152 G + 0,0722 B). A taxa deve ser ≥ 4,5:1 para texto normal (AA) e ≥ 7:1 para contraste aprimorado (AAA).
• As limitações do WCAG 2 incluem: tratamento simétrico de escuro-sobre-claro vs claro-sobre-escuro, grupos de tamanho de fonte grosseiros e calibração para tecnologia de display do início dos anos 2000.
• O APCA calcula um valor Lc assinado que distingue polaridade (texto escuro/fundo claro vs texto claro/fundo escuro) e usa expoentes diferentes para cada direção.
• A tabela de consulta de fontes do APCA faz com que os requisitos de contraste dependam do tamanho e peso da fonte — um modelo mais realista de como a legibilidade do texto realmente funciona.
• A maioria dos pares do mundo real produz veredictos concordantes entre os dois algoritmos. As divergências são mais significativas em tamanhos de fonte pequenos, pesos de fonte baixos e configurações claro-sobre-escuro.
• O WCAG 3.0 adotará o APCA como seu mecanismo de contraste, mas permanece em rascunho e os requisitos legais atuais ainda referenciam o WCAG 2.1/2.2.
• Melhor prática hoje: use o WCAG 2 para conformidade, o APCA como verificação suplementar de qualidade de design. Use o Verificador de Contraste para verificar as taxas WCAG 2 para cada par significativo de texto/fundo em seu design.