Color y contraste

¿Alguna vez intentaste leer texto en una pantalla y te resultó difícil hacerlo? al esquema de colores o te costaba ver la pantalla de una forma muy brillante o en un entorno con poca luz? O tal vez eres alguien con un color más permanente problemas de visión, como los 300 millones de personas con daltonismo o las 253 millones de personas con visión reducida?

Como diseñador o desarrollador, debes comprender cómo las personas perciben el color y contraste, ya sea temporal, situacional o permanente. Esto ayudará para satisfacer mejor sus necesidades visuales.

Este módulo te presentará algunos conceptos básicos accesibles de color y contraste.

Cómo percibir el color

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

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

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

El matiz 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 varían de 0 a 360, con rojo en 0, verde en 120 y azul en 240.

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

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

Medición del contraste de color

Para ayudar a las personas con diversas discapacidades visuales, el grupo WAI creó una fórmula de contraste de color para asegurarte de que existe suficiente contraste entre el texto y su fondo. Cuando estas relaciones de contraste de color son seguido, las personas con visión moderadamente reducida pueden leer el texto en segundo plano sin necesidad de tecnología de asistencia que mejore el contraste.

Veamos imágenes con una paleta de colores brillantes y comparemos cómo se mostraría a aquellos 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 púrpura, rojo, naranja, amarillo, verde aguamarina, azul claro y azul oscuro. A la derecha, hay un patrón de arcoíris multicolor más brillante.

Deuteranopia

Deuteranopia (comúnmente conocida como ceguera verde) se produce en el 1% al 5% de los hombres, del 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 podría verse este tipo de daltonismo.

Protanopia

Protanopia (comúnmente conocida como ceguera roja) se produce en el 1,01% al 1,08% de los hombres y el 0,02% de 0,03% de las mujeres.

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

Acromatopsia o monocromático

La acromatopsia o el monocromático (o daltonismo total) ocurren muy, muy rara vez.

Las personas con acromatopsia o monocromática no tienen casi ninguna percepción del rojo, luz verde o azul. Este filtro de daltonismo simula lo que este tipo de puede parecer daltonismo.

Calcular el contraste de color

La fórmula de contraste de color utiliza la luminancia relativa de colores para ayudar a determinar el contraste, que puede variar de 1 a 21. Esta fórmula a menudo se abrevia como [color value]:1. Por ejemplo, negro puro contra el blanco tiene la mayor relación de contraste de color (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 pasar el requisitos mínimos de las WCAG para el color. El texto de tamaño grande y los íconos esenciales deben tener una proporción de contraste de color de 3:1. El texto de tamaño grande se caracteriza por tener una resolución de, al menos, 18 pt / 24 px o 14 pt /. 18.5 px en negrita. Los logotipos y elementos decorativos están exentos de estos colores los requisitos de contraste.

Por suerte, no se requiere ninguna matemática avanzada, ya que hay muchas herramientas que hacen los cálculos de contraste de color por ti. Herramientas como Adobe Color, Analizador de contraste de color, Leonardo y Selector de color de Herramientas para desarrolladores de Chrome puede indicarte rápidamente la relación de contraste del color y ofrecerte sugerencias para ayudarte crear los pares de colores y paletas más inclusivos.

Uso del color

Sin niveles de contraste de color adecuados, palabras, íconos y otras imágenes elementos son difíciles de descubrir, y el diseño puede volverse inaccesible rápidamente. Pero también es importante pagar 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 omiten cualquier contenido o identificador adicionales del botón, para las personas con ciertos tipos de daltonismo saber qué botón para hacer clic. Del mismo modo, muchos gráficos, tablas y tablas usan solo el color para transmitir información. Agregar otro identificador, como un patrón, texto o icono, es son cruciales para que las personas puedan 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 enfocadas en el color

Además de comprobar las relaciones de contraste y el uso del color en la pantalla, deberías considerar aplicar la tecnología cada vez más popular y respaldada consultas de medios que ofrecen a los usuarios tener 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 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 parámetros de configuración del SO que se deben considerar para la accesibilidad del color, pero son mucho menos compatibles que las dos que se mencionan en este módulo. Consulta el artículo Modos de pantalla de accesibilidad del navegador y sistema operativo para obtener más información sobre las diferentes opciones de configuración de accesibilidad del SO.

Prefiere el esquema de colores

Navegadores compatibles

• (76)
• (79)
• (67)
• 12.1

Origen

La consulta de medios @prefers-color-scheme permite a los usuarios elegir una luz o una versión con tema oscuro del sitio web o la aplicación que visita. Puedes ver esto cambio de tema en acción cambiando tu configuración de preferencias de claro/oscuro y navegando a un navegador compatible con esta consulta de medios. Revisa el Mac y Instrucciones para Windows para el modo oscuro

la configuración general de apariencia de macOS.

Compara el modo claro y el oscuro.

Modo claro.

Modo oscuro

Prefiere el contraste

Navegadores compatibles

• (96)
• (96)
• Introducción
• 14.1

Origen

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

Compara el contraste normal con el alto.

Modo claro, sin preferencia de contraste.

Modo oscuro, preferencia de contraste alta.

Cómo superponer consultas de medios

Puedes usar varias consultas de medios enfocadas en el color para brindarles a los usuarios aún más y tomar una decisión. En este ejemplo, apilamos @prefers-color-scheme y @prefers-contrast juntos.

Compara el color y el contraste.

Modo claro, sin preferencia de contraste.

Modo oscuro, sin preferencia de contraste.

Modo claro, preferencia de contraste alta.

Modo oscuro, preferencia de contraste alta.

Verifica tus conocimientos

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. El texto por sí solo puede no ser 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 al 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.