Si tienes buena visión, podrías suponer que todos perciben los colores o la legibilidad del texto de la misma manera que tú. Claro que no es así. Como puedes imaginar, algunas combinaciones de colores que algunas personas pueden leer bien son difíciles o imposibles para 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 más diferentes, la relación de contraste es más alta.
Los lineamientos de WebAIM recomiendan una relación de contraste (mínima) de AA de 4.5:1 para todo el texto. Hay excepciones para texto muy grande (120-150% más grande que el texto del cuerpo predeterminado), en el que la proporción puede disminuir a 3:1. Observa la diferencia en las relaciones de contraste que se muestran aquí:
Se eligió la proporción de contraste de 4.5:1 para el nivel AA, ya que compensa la pérdida de sensibilidad de contraste que los usuarios con pérdida de la visión equivalente a una visión de aproximadamente 20/40 suelen experimentar. 20/40 se informa comúnmente como la agudeza visual típica de personas de alrededor de 80 años. En el caso de los usuarios con deficiencias visuales o 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. Para ejecutar el informe, sigue estos pasos:
- Abra Herramientas para desarrolladores.
- Haz clic en Auditorías.
- Selecciona Accesibilidad.
Chrome también incluye una función experimental para ayudarte a detectar todo el texto con bajo contraste de la página. También puedes usar las sugerencias de colores accesibles para corregir el texto con contraste bajo.
Para obtener un informe más completo, instala la extensión de Accessibility Insights. Sus informes de Fastpass incluyen detalles sobre los elementos que no pasan las verificaciones del contraste de color.
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 la AA y la 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.
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 cinco por ciento de tus usuarios no experimentarán tu sitio de la manera que deseas. Depender del color para transmitir información impulsa 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 mostrar que no es válido. A un usuario con deficiencias de color o de lectores de pantalla, esa información se comunica de manera deficiente o no se comunica en absoluto. Por este motivo, siempre debes tratar de ofrecer varios canales para que el usuario acceda a información crítica.
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 los rodea", a menos que cumplan con ciertos requisitos de contraste. En cambio, la lista de tareas recomienda agregar un indicador adicional, como un guion bajo (con la propiedad text-decoration de CSS), para indicar cuándo el vínculo está activo.
Una forma básica de solucionar el ejemplo anterior es agregar un mensaje adicional al campo para anunciar que no es válido y por qué.
Cuando compiles una app, ten en cuenta estos aspectos y ten cuidado con las áreas en las que podrías estar confiando demasiado en el color para transmitir información importante.
Si te interesa saber cómo luce tu sitio para diferentes personas o si dependes mucho del uso del color en tu IU, puedes usar Herramientas para desarrolladores para simular varias formas de discapacidad visual. Chrome incluye una función de emulación de deficiencias de visión. Para acceder, abre Herramientas para desarrolladores y, luego, abre la pestaña Renderización en el panel lateral. Desde allí, 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).
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 una discapacidad visual leve, el modo de contraste alto puede facilitar mucho 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 app 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.
De manera similar, en el ejemplo anterior, el subrayado rojo en el campo de número de teléfono no válido puede mostrarse en un color azul-verde difícil de distinguir.
Si cumples con las relaciones de contraste que se trataron 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.