Regla de accesibilidad: Los elementos deben tener suficiente contraste de color

Acerca de esta regla de accesibilidad

Según los umbrales de relación de contraste de WCAG 2 AA, todos los elementos de texto deben tener suficiente contraste entre el texto del primer plano y los colores de fondo.

Algunas personas con problemas de visión tienen poco contraste, lo que significa que hay pocas áreas brillantes u oscuras. Todo parece tener aproximadamente el mismo brillo, lo que hace difícil detectar contornos, bordes, límites y detalles. El texto cuya luminancia (brillo) es demasiado similar al fondo puede ser difícil de leer.

Casi tres veces más individuos sufren de baja visión que de ceguera total. Aproximadamente el 8% de los hombres y el 0.4% de las mujeres en Estados Unidos no pueden ver el espectro completo típico de colores. Una persona con visión deteriorada o daltonismo no puede distinguir el texto contra un fondo con contraste insuficiente.

En el fondo, se tienen en cuenta tanto la transparencia como la opacidad del color.

La transparencia y opacidad de los colores en el primer plano son más desafiantes de detectar y considerar debido a:

Los colores de fondo y primer plano son iguales.
Fondos con degradado en CSS
Colores de fondo para pseudo-elementos en CSS.
Colores de fondo generados usando bordes CSS.
Superposición por otra pieza en el primer plano - esto puede presentar desafíos de posicionamiento.
Elementos desplazados fuera del viewport usando CSS.

Qué verifica esta regla de accesibilidad

Examina cada elemento de texto para verificar que el contraste entre el texto del primer plano y los colores de fondo cumple con los requisitos de relación de contraste de WCAG 2 AAA.

Esta regla no reporta elementos de texto que tienen un background-image, están ocultos por otros componentes, o son imágenes de texto.

Esta verificación también busca elementos hijos de botones deshabilitados para que puedan ser ignorados y prevenir un valor falso.

Learn more: