Os elementos devem ter contraste de cor suficiente (regra aprimorada)

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

Algumas pessoas com visão comprometida têm pouco contraste, o que significa que há poucas áreas claras ou escuras. Tudo parece ter aproximadamente o mesmo brilho, tornando difícil detetar contornos, bordas, limites e detalhes. Texto cuja luminância (brilho) é demasiado semelhante ao fundo pode ser difícil de ler.

Quase três vezes mais indivíduos sofrem de baixa visão do que de 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 visão comprometida ou daltonismo não consegue distinguir texto contra um fundo com contraste insuficiente.

No fundo, tanto a transparência quanto a opacidade das cores são tidas em conta.

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

• As cores de fundo e primeiro plano são iguais.
• Fundos gradientes em CSS
• Cores de fundo para pseudo-elementos em CSS.
• Cores de fundo geradas usando bordas CSS.
• Sobreposição por outro elemento em 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 as cores do texto em primeiro plano e do fundo cumpre os requisitos de rácio de contraste WCAG 2 AAA.

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

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

Learn more:

Deque Reference

Deque University - How To Fix

→