Si tiene una buena visión, es fácil suponer que todos perciben los colores o la legibilidad del texto de la misma manera que usted, pero, por supuesto, ese no es el caso.
Como puede imaginar, algunas combinaciones de colores que son fáciles de leer para algunas personas son difíciles o imposibles para otras. Esto generalmente se reduce al contraste de color, la relación entre la luminancia de los colores de primer plano y de fondo. Cuando los colores son similares, la relación de contraste es baja; cuando son diferentes, la relación de contraste es alta.
Las pautas de WebAIM recomiendan una relación de contraste AA (mínima) 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 bajar a 3: 1. Observe la diferencia en las relaciones de contraste que se muestran a continuación.
Se eligió la relación de contraste de 4.5: 1 para el nivel AA porque compensa la pérdida de sensibilidad al contraste que suelen experimentar los usuarios con una pérdida de visión equivalente a aproximadamente una visión 20/40. Una agudeza visual de 20/40 se considera comúnmente como típica de personas de aproximadamente 80 años. Para usuarios con problemas de visión baja o deficiencias de color, podemos aumentar el contraste hasta 7: 1 para el texto del cuerpo.
Puede utilizar la Auditoría de accesibilidad en Lighthouse para comprobar el contraste de color. Abra DevTools, haga clic en Auditorías y seleccione Accesibilidad para ejecutar el informe.
Chrome también incluye una función experimental para ayudarlo a detectar todos los textos de bajo contraste de su página . También puede utilizar la sugerencia de color accesible para corregir el texto de bajo contraste.
Para obtener un informe más completo, instale la extensión Accessibility Insights. Una de las comprobaciones del informe Fastpass es el contraste de color. Obtendrá un informe detallado de cualquier elemento defectuoso.
Algoritmo de contraste de percepción avanzado (APCA)
El algoritmo de contraste de percepción avanzado (APCA) es una nueva forma de calcular el contraste basada en la investigación moderna sobre la percepción del color.
En comparación con las pautas AA/AAA, el APCA depende más del contexto.
El contraste se calcula en función de las siguientes características:
- Propiedades espaciales (peso de la fuente y tamaño del texto)
- Color del texto (diferencia de luminosidad percibida entre el texto y el fondo)
- Contexto (luz ambiental, entorno y propósito previsto del texto)
Chrome incluye una función experimental para reemplazar las pautas de relación de contraste AA / AAA con APCA .
No transmita información solo con colores
Hay aproximadamente 320 millones de personas en todo el mundo con deficiencia de visión de los colores. Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen alguna forma de "daltonismo"; eso significa que alrededor de una vigésima parte, o el 5%, de sus usuarios no experimentarán su sitio de la manera deseada. Cuando confiamos en el color para transmitir información, llevamos ese número a niveles inaceptables.
Por ejemplo, en un formulario de entrada, un número de teléfono puede estar subrayado en rojo para indicar que no es válido. Pero a un usuario de lector de pantalla o de color deficiente, esa información no se transmite bien, si es que se transmite. Por lo tanto, siempre debe intentar proporcionar múltiples vías para que el usuario acceda a información crítica.
La lista de verificación de WebAIM establece en la sección 1.4.1 que "el color no debe usarse como el único método para transmitir contenido o distinguir elementos visuales". También señala que "el color solo no debe usarse para distinguir los enlaces del texto circundante" a menos que cumplan ciertos requisitos de contraste. En cambio, la lista de verificación recomienda agregar un indicador adicional, como un guión bajo (usando la propiedad CSS text-decoration) para indicar cuándo el enlace está activo.
Una forma fácil de corregir el ejemplo anterior es agregar un mensaje adicional al campo, anunciando que no es válido y por qué.
Cuando cree una aplicación, tenga en cuenta este tipo de cosas y tenga cuidado con las áreas en las que puede depender demasiado del color para transmitir información importante.
Si tiene curiosidad acerca de cómo se ve su sitio para diferentes personas, o si depende en gran medida del uso del color en su interfaz de usuario, puede usar DevTools para simular varias formas de discapacidad visual, incluidos diferentes tipos de daltonismo. Chrome incluye una función Emular deficiencias visuales. Para acceder a él, abra DevTools y luego abra la pestaña Renderización en el cuadro, y así podrá emular las siguientes deficiencias de color.
- Protanopia: incapacidad para percibir la luz roja.
- Deuteranopia: incapacidad para percibir la luz verde.
- Tritanopia: incapacidad para percibir la luz azul.
- Acromatopsia: incapacidad para percibir cualquier color excepto los tonos de gris (extremadamente raro).
Modo de alto contraste
El modo de alto contraste permite al usuario invertir los colores de primer plano y de fondo, lo que a menudo ayuda a que el texto se destaque mejor. Para alguien con una discapacidad de baja visión, el modo de alto contraste puede facilitar la navegación por el contenido de la página. Hay algunas formas de obtener una configuración de alto contraste en su máquina.
Los sistemas operativos como Mac OSX y Windows ofrecen modos de alto contraste que se pueden habilitar para todo en el nivel del sistema.
Un ejercicio útil es activar la configuración de alto contraste y verificar que toda la interfaz de usuario de su aplicación aún sea visible y utilizable.
Por ejemplo, una barra de navegación puede usar un color de fondo sutil para indicar qué página está seleccionada actualmente. Si lo ve en una extensión de alto contraste, esa sutileza desaparece por completo, y con ella desaparece la comprensión del lector de qué página está activa.
De manera similar, si considera el ejemplo de la lección anterior, el subrayado rojo en el campo del número de teléfono no válido puede mostrarse en un color azul-verde difícil de distinguir.
Si cumple con los índices de contraste mencionados anteriormente, debería poder soportar el modo de alto contraste. Pero para mayor tranquilidad, considere la posibilidad de instalar la extensión de Chrome de alto contraste y revise su página para comprobar que todo funciona y se ve como se espera.