Regra de acessibilidade: Os elementos devem ter contraste de cor suficiente

Sobre esta regra de acessibilidade

De acordo com os limites de rácio de contraste WCAG 2 AA, todos os elementos de texto devem ter contraste suficiente entre o texto do primeiro plano e as cores de fundo.

Algumas pessoas com deficiência visual têm pouco contraste, significando que existem poucas áreas brilhantes ou escuras. Tudo parece ter aproximadamente o mesmo brilho, tornando difícil detetar contornos, bordas, limites e detalhes. Texto cuja luminância (brilho) é muito similar ao fundo pode ser difícil de ler.

Quase três vezes mais indivíduos sofrem de baixa visão do que cegueira total. Cerca de 8% dos homens e 0,4% das mulheres nos Estados Unidos não conseguem ver o espetro completo típico de cores. Uma pessoa com deficiência visual ou daltonismo não consegue distinguir texto contra um fundo com contraste insuficiente.

No fundo, tanto a transparência de cor como a opacidade são tidas em conta.

A transparência e opacidade das cores no primeiro plano são mais desafiadoras de detetar e contabilizar devido a:

As cores de fundo e primeiro plano são iguais.
Fundos com gradiente em CSS
Cores de fundo para pseudo-elementos em CSS.
Cores de fundo geradas usando bordas CSS.
Sobreposição por outro elemento no primeiro plano - isto pode apresentar desafios de posicionamento.
Elementos deslocados para fora da viewport usando CSS.

O que esta regra de acessibilidade verifica

Examina cada elemento de texto para verificar que o contraste entre o texto do primeiro plano e as cores de fundo cumpre os requisitos de rácio de contraste WCAG 2 AAA.

Esta regra não reporta elementos de texto que tenham uma background-image, estejam ocultos por outros componentes, ou sejam imagens de texto.

Esta verificação também procura elementos filhos de botões desativados para que possam ser ignorados para prevenir um valor falso.

Learn more: