Accesibilidad de color y contraste

Si tienes buena visión, es fácil suponer que todos perciben los colores o la legibilidad del texto de la misma manera que tú, pero, por supuesto, ese no es el caso.

Como puedes imaginar, algunas combinaciones de colores que a algunas personas les resultan fáciles de leer les resultan difíciles o imposibles a otras. Por lo general, esto se debe al contraste de color, la relación entre la luminancia de los colores de primer plano y segundo plano. Cuando los colores son similares, la relación de contraste es baja. Cuando son diferentes, la relación de contraste es alta.

Los lineamientos de WebAIM recomiendan una relación de contraste (mínima) AA de 4.5:1 para todo el texto. Se hace una excepción para el texto muy grande (120-150% más grande que el texto del cuerpo predeterminado), para el cual la proporción puede disminuir a 3:1. Observa la diferencia en las relaciones de contraste que se muestran a continuación.

Una imagen que muestra las diferentes relaciones de contraste

Se eligió la relación de contraste de 4.5:1 para el nivel AA, ya que compensa la pérdida de sensibilidad de contraste que suelen experimentar los usuarios con una pérdida de visión equivalente a una visión de 20/40 aproximadamente. Se suele informar 20/40 como agudeza visual típica de personas de alrededor de 80 años. En el caso de los usuarios con discapacidad visual o deficiencia de color, podemos aumentar el contraste del texto del cuerpo hasta 7:1.

Puedes usar la auditoría de accesibilidad en Lighthouse para comprobar el contraste de color. Abra Herramientas para desarrolladores, haga clic en Auditorías y seleccione Accesibilidad para ejecutar el informe.

Captura de pantalla del resultado de una auditoría de contraste de color.

Chrome también incluye una función experimental para ayudarte a detectar todos los textos con bajo contraste de la página. También puedes usar la sugerencia de colores accesibles para corregir el texto con contraste bajo.

Captura de pantalla del resultado de la función experimental de texto de bajo contraste de Chrome.

Para obtener un informe más completo, instala la extensión de Accessibility Insights. Una de las verificaciones en el informe Fastpass es el contraste de color. Obtendrás un informe detallado de los elementos con errores.

El informe en Estadísticas de accesibilidad

Algoritmo de contraste perceptual avanzado (APCA)

El algoritmo de contraste perceptual avanzado (APCA) es una nueva forma de calcular el contraste según investigaciones modernas sobre la percepción del color.

En comparación con los lineamientos de las AA y las AAA, la APCA depende más del contexto.

El contraste se calcula en función de los siguientes atributos:

  • Propiedades espaciales (grosor de la fuente y tamaño del texto)
  • Color del texto (diferencia de luminosidad percibida entre el texto y el fondo)
  • Contexto (luz ambiente, entorno y propósito del texto)

Chrome incluye una función experimental para reemplazar los lineamientos de relación de contraste AA/AAA con la APCA.

Captura de pantalla del resultado de la función APCA en Chrome.

No transmitas información solo con color

En el mundo, hay alrededor de 320 millones de personas con deficiencia de visión de los colores. Alrededor de 1 de cada 12 hombres y 1 de cada 200 mujeres tienen algún tipo de "daltonismo", lo que significa que alrededor de un 20%, es decir, el 5%, de tus usuarios no tendrán la experiencia deseada del sitio. Cuando dependemos del color para transmitir la información, llevamos esa cantidad a niveles inaceptables.

Por ejemplo, en un formulario de entrada, un número de teléfono puede estar subrayado en rojo para mostrar que no es válido. Pero para un usuario con deficiencias del color o un lector de pantalla, esa información no se transmite bien, si es que algo se transmite. Por lo tanto, siempre debes tratar de ofrecer varias vías para que el usuario acceda a información crítica.

Una imagen de un formulario de entrada con un número de teléfono incorrecto destacado solo con un color rojo.

La lista de tareas de WebAIM indica en la sección 1.4.1 que “el color no debe usarse como único método para transmitir contenido o distinguir elementos visuales”. También indica que "no se debe usar solo el color para distinguir vínculos del texto que lo rodea", a menos que cumplan con ciertos requisitos de contraste. En su lugar, se recomienda agregar un indicador adicional, como un guion bajo (mediante la propiedad text-decoration de CSS), para indicar cuándo el vínculo está activo.

Una manera fácil de solucionar el ejemplo anterior es agregar un mensaje adicional al campo, anunciar que no es válido y por qué.

El mismo formulario de entrada que en el último ejemplo, esta vez con una etiqueta de texto que indica el problema con el campo.

Cuando compiles una app, ten en cuenta estas cuestiones y ten cuidado con las áreas en las que puedas estar confiando demasiado en el color para transmitir información importante.

Si sientes curiosidad por saber cómo luce tu sitio para diferentes personas o si dependes en gran medida del uso del color en tu IU, puedes usar Herramientas para desarrolladores para simular varias formas de discapacidad visual, incluidos diferentes tipos de daltonismo. Chrome incluye una función de emulación de deficiencias de visión. Para acceder, abre Herramientas para desarrolladores y, luego, la pestaña Renderización en el panel lateral. A continuación, puedes emular las siguientes deficiencias de color.

  • Protanopia: incapacidad para percibir el color rojo.
  • Deuteranopia: la incapacidad de percibir el color verde.
  • Tritanopia: La incapacidad de percibir el color azul.
  • Acromatopsia: incapacidad de percibir cualquier color, excepto los tonos de gris (extremadamente inusual).
Emulando la visión de una persona con Acromatopsia, se muestra nuestra página en escala de grises.

Modo de alto contraste

El modo de contraste alto permite al usuario invertir los colores del primer plano y el segundo plano, lo que a menudo ayuda a que el texto se destaque mejor. Para una persona con discapacidad visual, el modo de contraste alto puede facilitar la navegación por el contenido de la página. Existen varias formas de configurar el contraste alto en tu máquina.

Los sistemas operativos como Mac OSX y Windows ofrecen modos de contraste alto que se pueden habilitar para todo al nivel del sistema.

Un ejercicio útil es activar la configuración de contraste alto y verificar que toda la IU de tu aplicación sea visible y utilizable.

Por ejemplo, una barra de navegación puede tener un color de fondo sutil para indicar qué página está seleccionada. Si la ves en una extensión de contraste alto, esa sutileza desaparece por completo y, con ella, se va la comprensión del lector de qué página está activa.

Captura de pantalla de una barra de navegación en modo de alto contraste donde la pestaña activa es difícil de leer

De manera similar, si consideras el ejemplo de la lección anterior, el subrayado rojo en el campo de número de teléfono no válido podría mostrarse en un color azul-verde difícil de distinguir.

Captura de pantalla del formulario de dirección que se usó anteriormente, esta vez en modo de contraste alto. El cambio de color del elemento no válido es difícil de leer.

Si alcanzas las relaciones de contraste que abordamos antes, no deberías tener problemas para admitir el modo de contraste alto. Pero para mayor tranquilidad, considera instalar la extensión de Chrome con alto contraste y revisa tu página para verificar que todo funcione y se vea como esperabas.