Cor e contraste

O texto precisa de contraste suficiente com o fundo

Regra: color-contrast
Gravidade: Grave
Nível WCAG AA

Por que isso importa

Texto de baixo contraste é ilegível para quem tem visão reduzida, no celular sob o sol ou num monitor barato. É de longe a falha mais comum da web.

Como corrigir

Leve o texto normal a pelo menos 4,5:1 contra o fundo, e o texto grande (24px, ou 19px em negrito) a 3:1.
Escureça o texto em vez de clarear o fundo quando as cores da marca forem fixas.
Confira também as cores de estado: texto de exemplo, itens que parecem desativados mas estão ativos, e texto sobre imagens.

Na marcação

Falha

.note { color: #9a9a9a; background: #ffffff; } /* 2.6:1 */

Passa

.note { color: #595959; background: #ffffff; } /* 7:1 */

O que a verificação não consegue julgar

O motor ignora o texto que não consegue medir: sobre gradiente, sobre imagem ou com fundo parcialmente transparente. Isso exige olho humano.

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

1.4.3 Contraste (mínimo) (abre em nova aba) — Nível WCAG AA

Para aprofundar

Deque University sobre color-contrast (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.