Color y contraste

¿Alguna vez intentaste leer texto en una pantalla y te resultó difícil debido al esquema de colores o tuviste problemas para ver la pantalla en un entorno muy iluminado o con poca luz? ¿O tal vez tienes un problema de visión de color más permanente, como los 300 millones de personas con daltonismo o los 253 millones de personas con visión reducida?

Como diseñador o desarrollador, debes comprender cómo las personas perciben el color y el contraste, ya sea de forma temporal, situacional o permanente. Esto te ayuda a satisfacer mejor sus necesidades visuales.

En este módulo, se te presentarán algunos aspectos básicos del color y el contraste accesibilidad.

Percibir el color

¿Sabías que los objetos no poseen color, sino que reflejan las longitudes de onda de la luz? Cuando ves colores, tus ojos reciben y procesan esas longitudes de onda y las convierten en colores.

Cuando se trata de accesibilidad digital, hablamos sobre estas longitudes de onda en términos de tono, saturación y luminosidad (HSL). El modelo HSL se creó como una alternativa al modelo de color RGB y se alinea más con la forma en que un ser humano percibe el color.

Nota: En CSS, se puede especificar un color de muchas maneras, como con nombres de color, valores RGB, RGBa, HEX, HSL, HSLa, HSV o HSVa. HSLa es similar a HSL, solo se agregó un valor de alfa. El valor alfa es una medición de la opacidad y se define como un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).

Tono es una forma cualitativa de describir un color, como rojo, verde o azul, donde cada tono tiene un punto específico en el espectro de colores con valores que van del 0 al 360, donde el rojo es 0, el verde 120 y el azul, 240.

La saturación es la intensidad de un color, medida en porcentajes que van del 0% al 100%. Un color con saturación completa (100%) sería muy vívido, mientras que uno sin saturación (0%) sería en escala de grises o blanco y negro.

La luminosidad es el carácter claro o oscuro de un color, medido en porcentajes que van del 0% (negro) al 100% (blanco).

Mide el contraste de color

Para ayudar a las personas con diversas discapacidades visuales, el grupo WAI creó una fórmula de contraste de colores para garantizar que exista suficiente contraste entre el texto y su fondo. Cuando se siguen estas relaciones de contraste de color, las personas con visión moderadamente baja pueden leer el texto en segundo plano sin necesidad de tecnología de accesibilidad que mejore el contraste.

Observa imágenes con una paleta de colores vibrantes y compara cómo se verían esas imágenes para las personas con formas específicas de daltonismo.

Foto de Alexander Grey en Unsplash.

Foto de Clark Van Der Beken en Unsplash.

A la izquierda, la imagen muestra arena de arcoíris con colores morado, rojo, naranja, amarillo, verde agua, azul claro y azul oscuro. A la derecha, hay un patrón de arco iris multicolor más brillante.

Deuteranopia

La deuteranopia (conocida comúnmente como ceguera verde) ocurre en el 1% al 5% de los hombres y en el 0.35% al 0.1% de las mujeres.

Las personas con deuteranopia tienen una sensibilidad reducida a la luz verde. Este filtro de daltonismo simula cómo se vería este tipo de daltonismo.

Protanopia

La protanopia (comúnmente conocida como ceguera roja) se produce en el 1.01% al 1.08% de los hombres y el 0.02% del 0.03% de las mujeres.

Las personas con protanopia tienen una sensibilidad reducida a la luz roja. Este filtro de daltonismo simula cómo se vería este tipo de daltonismo.

Acromatopsia o monocromático

La acromatopsia o monocromatismo (o ceguera total al color) ocurre muy, muy raramente.

Las personas con acromatopsia o monocromatismo casi no tienen percepción de la luz roja, verde o azul. Este filtro de daltonismo simula cómo se vería este tipo de daltonismo.

Cómo calcular el contraste de color

La fórmula de contraste de colores usa la luminosidad relativa de los colores para ayudar a determinar el contraste, que puede variar de 1 a 21. Esta fórmula suele abreviarse como [color value]:1. Por ejemplo, el negro puro en contraste con el blanco puro tiene la relación de contraste de color más alta en 21:1.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

El texto de tamaño normal, incluidas las imágenes de texto, debe tener una proporción de contraste de color de 4.5:1 para cumplir con los requisitos mínimos de WCAG para el color. El texto de gran tamaño y los íconos esenciales deben tener una relación de contraste de color de 3:1. El texto de gran tamaño se caracteriza por tener al menos 18 puntos/24 px o 14 puntos/18.5 px en negrita. Los logotipos y elementos decorativos están exentos de estos requisitos de contraste de color.

Por suerte, no se requieren cálculos matemáticos avanzados, ya que hay muchas herramientas que harán los cálculos de contraste de color por ti. Las herramientas como Adobe Color, el Analizador de contraste de color, Leonardo y el selector de color de Herramientas para desarrolladores de Chrome pueden indicarte rápidamente las relaciones de contraste de color y ofrecer sugerencias para ayudarte a crear los pares de colores y paletas más inclusivos.

Uso del color

Sin buenos niveles de contraste de color, las palabras, los íconos y otros elementos gráficos son difíciles de descubrir, y el diseño puede volverse inaccesible rápidamente. Pero también es importante prestar atención a cómo se usa el color en la pantalla, ya que no puedes usar solo el color para transmitir información, acciones o distinguir un elemento visual.

Por ejemplo, si dices "haz clic en el botón verde para continuar", pero omites cualquier contenido o identificador adicional del botón, sería difícil para las personas con ciertos tipos de daltonismo saber en qué botón hacer clic. Del mismo modo, muchos gráficos, cuadros y tablas usan solo el color para transmitir información. Es fundamental agregar otro identificador, como un patrón, un texto o un ícono, para ayudar a las personas a comprender el contenido.

Revisar tus productos digitales en escala de grises es una buena manera de detectar rápidamente posibles problemas de color.

Consultas de medios centradas en el color

Además de verificar las relaciones de contraste de color y el uso de color en la pantalla, deberías considerar aplicar las consultas de contenido cada vez más populares y compatibles que ofrecen a los usuarios más control sobre lo que se muestra en la pantalla.

Por ejemplo, con la consulta de medios @prefers-color-scheme, puedes crear un tema oscuro, que puede ser útil para las personas con fotofobia o sensibilidad a la luz. También puedes compilar un tema de contraste alto con @prefers-contrast, que admite personas con deficiencias de color y sensibilidad de contraste.

Nota: Existen consultas de medios adicionales y opciones de configuración del SO que se deben tener en cuenta para la accesibilidad de los colores, pero son mucho menos compatibles que las dos que se enumeran en este módulo. Consulta Modos de visualización de accesibilidad del sistema operativo y del navegador para obtener más información sobre los diversos parámetros de configuración de accesibilidad del SO.

Prefers color scheme

Navegadores compatibles

• 76
• 79
• 67
• 12.1

Origen

La consulta de medios @prefers-color-scheme permite que los usuarios elijan una versión con tema oscuro o claro del sitio web o la app que visitan. Para ver el cambio de este tema en acción, cambia la configuración de preferencias clara u oscura y navega a un navegador compatible con esta consulta de medios. Revisa las instrucciones para el modo oscuro en Mac y Windows.

Configuración general de macOS para la apariencia.

Compara el modo claro y el oscuro.

Modo claro.

Modo oscuro.

Prefiere el contraste

Navegadores compatibles

• 96
• 96
• 101
• 14.1

Origen

La consulta de medios @prefers-contrast verifica la configuración del SO del usuario para ver si el contraste alto está activado o desactivado. Para ver este cambio de tema en acción, cambia la configuración de preferencia de contraste y navega a un navegador que admita esta consulta de medios (configuración del modo de contraste de Mac y Windows).

Compara el contraste normal y alto.

Modo claro, sin preferencia de contraste.

Modo oscuro, preferencia de contraste alto.

Cómo aplicar consultas de medios en capas

Puedes usar varias consultas de medios centradas en el color para darles a los usuarios aún más opciones. En este ejemplo, apilamos @prefers-color-scheme y @prefers-contrast.

Compara el color y el contraste.

Modo claro, sin preferencia de contraste.

Modo oscuro, sin preferencia de contraste.

Modo claro, preferencia de contraste alto.

Modo oscuro, preferencia de contraste alto.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre el color y el contraste

El color por sí solo no es un identificador suficiente para la documentación. ¿Qué más ayudará a los lectores a identificar los elementos de la IU?

Patrón

No exactamente. Los patrones por sí solos no son suficientes para ayudar a un usuario a identificar un elemento de la IU.

Texto

No exactamente. Es posible que el texto por sí solo no sea suficiente para ayudar a un usuario a identificar un elemento de la IU.

Ícono

No exactamente. Un ícono por sí solo no es suficiente para ayudar a un usuario a identificar un elemento de la IU.

Todas las opciones anteriores

Sí. Dos o más identificadores ayudarán al usuario a identificar un elemento de la IU.