Contraste del color

De Guía de Diseño Web Accesible

Pauta 2: No se base sólo en el color. Punto de verificación 2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para texto].

Dos colores ofrecen buena visibilidad si la diferencia en brillo y la diferencia en color entre ambos es mayor que un mínimo dado. El nivel de visibilidad se define en base a algoritmos definidos por la W3C.

El brillo de color se determina por medio de la siguiente fórmula: ((valor de Rojo X 299) + (valor de Verde X 587) + (valor de Azul X 114)) / 1000

La W3C sugiere que la diferencia entre el brillo de fondo, y el brillo de primer plano debería ser mayor a 125.

La diferencia de color se determina por medio de la siguiente fórmula: (máximo (valor Rojo 1, valor Verde 2) - mínimo (valor Rojo 1, valor Rojo 2)) + (máximo (valor Verde 1, valor Verde 2) - mínimo (valor Verde 1, valor Verde 2)) + (máximo (valor Azul 1, valor Azul 2) - mínimo (valor Azul 1, valor Azul 2))

La W3C sugiere que la diferencia entre el color de fondo y el color de primer plano debería ser mayor que 500.

Una herramienta muy útil para verificar estas características de contraste de colores es el Analizador de Contraste de Colores en la versión 2.0 en español o Color Contrast Analyser en sus versiones en inglés.

Otra herramienta interesante es Colorblind Web Page Filter, sirve para simular diferentes dificultades para ver colores.

También tenemos la herramienta de validación de contrastes de HERA, Contraste de color.

Un validador muy completo: AccessColor. La ventaja de este verificador online es que revisa toda la página y muestra en detalle cada zona donde hay contraste de colores diciendo si supera tanto el mínimo de diferencia de brillo como de diferencia de contraste. Resulta más cómodo para saber exactamente dónde y en que forma está el error.