Haciendo una Web Accesible: el uso adecuado de los colores

Siempre es bueno asegurarse que el primer plano y las combinaciones del color de fondo proporcionen suficiente contraste cuando sea visto por alguien con deficiencia visual o para visualizarlas con pantallas monocromáticas; estableciendo conformidad con el Punto de Verificación 2.2 de las Pautas de Accesibilidad al Contenido en la Web 1.0

Se considera que dos colores ofrecen buena visibilidad de color si la diferencia en brillo y la diferencia en color entre ambos es mayor que un intervalo dado.

El proceso para definir el nivel de "visibilidad del color" se basa en los algoritmos que sugiere el Consorcio de la World Wide Web (W3C). El intervalo que sugiere es > 125 para el brillo de color y > 500 para la diferencia de color.

El brillo de color se determina por medio de la siguiente fórmula:

((valor de Rojo * 299) + (valor de Verde * 587) + (valor de Azul * 114)) / 1000

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 diferencia entre el color de fondo y el color de primer plano debería ser mayor que 500.

Veamos un ejemplo:

Color de primer plano:

(hex.) #80FF80 (RGB.) 128, 255, 128

Color de fondo:

(hex.) #000000 (RGB.) 0, 0, 0

Fórmula de Brillo de Color:

(128 * 299) + (255 * 587) + (128 * 114) / 1000 = 202

La diferencia en brillo entre los dos colores es suficiente. El límite es 125, y el resultado para los colores de fondo y primer plano es 202.

Fórmula de Diferencia de Color:

128 - 0 + 255 - 0 + 128 - 0 = 511

La diferencia en color entre los dos colores es suficiente. El límite es 500, y el resultado para los colores de fondo y primer plano es 511.