¿Alguna vez intentaste leer texto en una pantalla y te resultó difícil de leer debido al esquema de colores o tuviste problemas para verla en un entorno muy brillante o con poca luz? ¿O tal vez eres alguien con 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 temporal, situacional o permanente. Esto te ayudará a satisfacer mejor sus necesidades visuales.
En este módulo, conocerás algunos conceptos básicos de color y contraste accesibles.
Percepción del color
¿Sabías que los objetos no tienen color, pero reflejan longitudes de onda de luz? Cuando ves color, tus ojos reciben y procesan esas longitudes de onda y las convierten en colores.
Cuando se trata de accesibilidad digital, hablamos de estas longitudes de onda en términos de matiz, saturación y luminosidad (HSL). El modelo HSL se creó como alternativa al modelo de color RGB y se alinea más con la forma en que las personas perciben el color.
Hue es una forma cualitativa de describir un color, como rojo, verde o azul, donde cada matiz tiene un punto específico en el espectro de colores con valores que van del 0 al 360, con rojo en 0, verde en 120 y azul en 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 intenso, mientras que un color sin saturación (0%) sería una escala de grises o blanco y negro.
La luminosidad es el carácter claro u oscuro de un color, que se mide en porcentajes que van del 0% (negro) al 100% (blanco).
Cómo medir el contraste de color
Para ayudar a las personas con diversas discapacidades visuales, el grupo de WAI creó una fórmula de contraste de color para garantizar que exista suficiente contraste entre el texto y su fondo. Cuando se respetan 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.
Veamos imágenes con una paleta de colores brillantes y comparemos cómo se vería esa imagen ante personas con formas específicas de daltonismo.
A la izquierda, la imagen muestra la arena del arcoíris con colores púrpura, rojo, naranja, amarillo, verde aguamarina, celeste y azul oscuro. A la derecha, hay un patrón de arcoíris multicolor más brillante.
Deuteranopia
La deuteranopia (comúnmente conocida como ciega verde) ocurre en el 1% al 5% de los hombres y del 0.35% al 0.1% en las mujeres.
Las personas con Deuteranopia tienen una sensibilidad reducida a la luz verde. Este filtro de daltonismo simula cómo podría ser este tipo de daltonismo.
Protanopia
La protanopia (comúnmente conocida como ciego rojo) ocurre en el 1.01% al 1.08% de los hombres y en el 0.02% de las mujeres.
Las personas con Protanopia tienen una sensibilidad reducida a la luz roja. Este filtro de daltonismo simula cómo podría ser este tipo de daltonismo.
Acromatopsia o monocromatismo
La acromatopsia o el monocromatismo (o el daltonismo completo) ocurre en muy pocos casos.
Las personas con acromatopsia o monocromatismo casi no perciben la luz roja, verde ni azul. Este filtro de daltonismo simula cómo podría ser este tipo de daltonismo.
Cómo calcular el contraste de color
La fórmula de contraste de color usa la luminancia relativa de los colores para ayudar a determinar el contraste, que puede variar de 1 a 21. A menudo, esta fórmula se abrevia como [color value]:1. Por ejemplo, el negro puro frente al blanco puro tiene la mayor relación de contraste de color 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 relación de contraste de color de 4.5:1 para pasar 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 tamaño grande se caracteriza por tener, al menos, 18 pt / 24 px o 14 pt/18.5 px en negrita. Los logotipos y los elementos decorativos están exentos de estos requisitos de contraste de color.
Afortunadamente, no se requieren cálculos 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 para Herramientas para desarrolladores de Chrome pueden indicarte rápidamente las relaciones de contraste de color y ofrecer sugerencias para ayudarte a crear las paletas y los pares de colores más inclusivos.
Cómo usar el color
Si no hay 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. Sin embargo, también es importante prestar atención a cómo se usa el color en la pantalla, ya que no puedes usar el color solo 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 en el botón, sería difícil para las personas con ciertos tipos de daltonismo saber en qué botón hacer clic. De manera similar, muchos gráficos, tablas y tablas usan solo el color para transmitir información. Agregar otro identificador, como un patrón, texto o ícono, es fundamental para ayudar a las personas a comprender el contenido.
Revisar tus productos digitales en escala de grises es una buena manera de detectar posibles problemas de color rápidamente.
Consultas de medios centradas en el color
Más allá de verificar las relaciones de contraste de color y el uso de color en la pantalla, deberías considerar aplicar las consultas de contenido multimedia, 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 crear un tema de alto contraste con @prefers-contrast, que ayuda a las personas con deficiencias de color y sensibilidad al contraste.
Prefiere el esquema de colores
La consulta de medios @prefers-color-scheme permite a los usuarios elegir una versión con tema oscuro o claro del sitio web o la app que están visitando. Para ver este cambio de tema en acción, cambia la configuración de preferencias de tono oscuro o claro y navega a un navegador que admita esta consulta de contenido multimedia. Revisa las instrucciones para Mac y Windows sobre el modo oscuro.
Prefiere el contraste
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 preferencias de contraste y navega a un navegador que admita esta consulta de contenido multimedia (configuración del modo de contraste de Mac y Windows).
Cómo superponer consultas de medios
Puedes usar varias consultas de medios centradas en el color para brindar a los usuarios aún más opciones. En este ejemplo, apilamos @prefers-color-scheme y @prefers-contrast juntos.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre color y 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?