Gracias por seguir Google I/O. Mira contenido a pedido.

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 eres una persona con un problema de visión del color más permanente, como las aproximadamente 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 el contraste, ya sea de forma temporal, situacional o permanente. Esto te ayuda a satisfacer mejor sus necesidades visuales.

En este módulo, se presentarán algunos conceptos básicos de accesibilidad sobre el color y el contraste.

Percepción del color

Un ojo que mira la rueda de colores.

¿Sabías que los objetos no tienen color, sino que reflejan longitudes de onda de luz? Cuando ves un 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 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.

Tono es una forma cualitativa de describir un color, como rojo, verde o azul, en la que cada tono tiene un lugar específico en el espectro de colores con valores que van de 0 a 360, con el rojo en 0, el verde en 120 y el 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 vivo, mientras que un color sin saturación (0%) sería en escala de grises o en blanco y negro.

La luminosidad es el carácter claro u oscuro de un color, medido en porcentajes que van del 0% (negro) al 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 garantizar que haya suficiente contraste entre el texto y su fondo. Cuando se siguen estas proporciones de contraste de color, las personas con visión moderadamente reducida pueden leer el texto en el fondo sin necesidad de tecnología de accesibilidad que mejore el contraste.

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

Arena de arcoíris original. — Foto de Alexander Grey en Unsplash.

Patrón de arcoíris original. — 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 agua, azul claro y azul oscuro. A la derecha, se muestra un patrón de arcoíris multicolor más brillante.

Deuteranopia

La deuteranopia (conocida comúnmente como ceguera al 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 podría verse este tipo de daltonismo.

Protanopia

La protanopia (conocida comúnmente como ceguera al rojo) ocurre en el 1.01% al 1.08% de los hombres y en el 0.02% al 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 monocromatismo

Arena de arcoíris, como la ve una persona con acromatopsia.

Patrón de arcoíris, tal como lo ve una persona con acromatopsia.

La acromatopsia o el monocromatismo (o daltonismo completo) ocurre muy, muy rara vez.

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 podría verse este tipo de daltonismo.

Cálculo del contraste de color

La fórmula de contraste de color usa la luminancia relativa de 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 sobre el blanco puro tiene la mayor proporció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 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 proporció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 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. Herramientas como Adobe Color, Color Contrast Analyzer, Leonardo y el selector de color de las Herramientas para desarrolladores de Chrome pueden indicarte rápidamente las proporciones de contraste de color y ofrecer sugerencias para ayudarte a crear los pares y las paletas de colores 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 rápidamente inaccesible. Sin embargo, 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, diagramas 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 rápidamente posibles problemas de color.

Consultas de medios centradas en el color

Además de verificar las proporciones de contraste de color y el uso del color en la pantalla, debes considerar aplicar las consultas de medios 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 admite personas con deficiencias de color y sensibilidad al contraste.

Esquema de colores preferido

Browser Support

Source

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

Parámetros de configuración generales de macOS para la apariencia.

Compara el modo claro y el modo oscuro.

Ejemplo de código en modo claro. — Modo claro.

Ejemplo de código en modo oscuro. — Modo oscuro.

Contraste preferido

Browser Support

Source

La @prefers-contrast consulta de medios 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 medios (MacMac y Windows ).

Compara el contraste normal y el alto.

Ejemplo de código en modo claro sin preferencia de contraste. — Modo claro, sin preferencia de contraste.

Ejemplo de código en modo oscuro con preferencia de contraste alto. — Modo oscuro, preferencia de alto contraste.

Consultas de medios en capas

Puedes usar varias consultas de medios centradas en el color para brindarles 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, contraste normal. — Modo claro, sin preferencia de contraste.

Modo oscuro, contraste normal. — Modo oscuro, sin preferencia de contraste.

Modo claro, contraste alto. — Modo claro, preferencia de alto contraste.

Modo oscuro, contraste alto. — Modo oscuro, preferencia de alto contraste.

Images

Animación y movimiento