Como usar: Verificador de Contraste APCA
- Informe as cores do texto e do fundo (em qualquer formato CSS).
- Leia o valor de Lc — quanto maior, mais legível. Valores negativos indicam texto claro sobre fundo escuro.
- Confira a tabela de usos para ver se o par é adequado para texto corrido, títulos ou apenas elementos que não são texto.
- Compare com a razão do WCAG 2 exibida ao lado, que ainda é o padrão legal e de auditoria atualmente.
O que é o APCA?
O APCA (Accessible Perceptual Contrast Algorithm), desenvolvido por Andrew Somers para o W3C, é o método de contraste proposto para as próximas diretrizes WCAG 3. Em vez de uma razão como 4,5:1, ele gera um valor de contraste de luminosidade Lc de aproximadamente 0 a 106 (positivo para texto escuro em fundo claro, negativo para texto claro em fundo escuro). Ele modela como a visão humana percebe o contraste de fato, incluindo o efeito do tamanho e do peso da fonte.
Por que usar o APCA em vez da razão do WCAG 2?
- Consciente da polaridade: o WCAG 2 trata branco sobre preto e preto sobre branco da mesma forma, mas nossos olhos não. O APCA pontua cada um de forma diferente.
- Melhor com o modo escuro: a fórmula do WCAG 2 superestima o contraste em pares de cores escuras, então algumas combinações "aprovadas" no tema escuro são difíceis de ler. O APCA identifica esses casos.
- Menos falsas reprovações: alguns pares de tons médios legíveis, como texto branco em botões laranja, falham no WCAG 2, mas o APCA os avalia de forma mais realista.
Como interpretar o valor Lc
| Lc | Adequado para |
|---|---|
| 90+ | Ideal para texto corrido e leitura longa |
| 75 | Mínimo para texto corrido (~18px regular) |
| 60 | Outros textos de conteúdo (~24px regular ou 16px negrito) |
| 45 | Títulos grandes e rótulos grandes de interface |
| 30 | Texto de placeholder, estados desativados, ícones grandes |
| 15 | Mínimo para elementos que não são texto, como divisores |
Estas são diretrizes simplificadas de "nível bronze"; a abordagem completa do APCA usa tabelas de consulta por tamanho e peso da fonte.
Devo usar o APCA hoje?
O WCAG 3 ainda é um rascunho em andamento e a versão final do APCA pode mudar. Leis e auditorias de acessibilidade (incluindo o European Accessibility Act, que referencia o WCAG 2.1 via EN 301 549) ainda usam a razão do WCAG 2. A abordagem prática: atenda ao WCAG 2 AA para conformidade e use o APCA como uma segunda opinião — especialmente para temas escuros e textos grandes de destaque. Verifique o WCAG 2 em detalhes com o Verificador de Contraste.
Também pesquisado como: apca, wcag 3, contraste lc, contraste perceptual, acessibilidade, contraste de texto, verificador de contraste, silver.
Ferramentas que combinam com: Verificador de Contraste APCA
- Simulador de Daltonismo — Envie um screenshot ou design e veja em oito tipos de deficiência de visão de cores lado a lado, ou teste uma paleta para descobrir cores que ficam indistinguíveis.
- Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
- Conversor OKLCH — Explore o espaço de cor OKLCH, perceptualmente uniforme, com controles deslizantes em tempo real, veja se a cor cabe no sRGB e copie os fallbacks HEX, RGB e HSL correspondentes.
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.