Los colores que eliges para la interfaz de tu app determinan la facilidad con la que los usuarios pueden leer y comprender la información en ella. Un contraste de color suficiente permite que el texto y las imágenes sean más fáciles de leer y comprender.
Además de beneficiar a los usuarios con diferentes discapacidades visuales, el contraste de color adecuado ayuda a todos los usuarios que visualizan la interfaz en dispositivos en condiciones adversas de iluminación, como exposición directa a la luz del sol o en pantallas con brillo bajo.
Implementación
Cuando implementes la interfaz de usuario de una app, especifica colores de primer plano y segundo plano que tengan suficiente contraste de color.
La “proporción de contraste” es un cálculo de la diferencia de luminosidad (la intensidad de la luz emitida) entre dos colores cercanos cuando se los muestra en una pantalla. Esta proporción varía de 1 a 21 (a menudo representada como 1:1 a 21:1), en la que los números más altos indican un mayor contraste. Hay muchas herramientas disponibles para calcular la proporción de contraste de dos colores vecinos, como esta calculadora de proporción de contraste de color.
Cuando uses TextView para mostrar texto, utiliza android:textColor y android:background para definir los colores de primer y segundo plano con una proporción de contraste alta. Cuando uses Text en Compose, usa el parámetro color y Modifier.background para definir los colores de primer plano y segundo plano con una proporción de contraste alta.
El W3C recomienda las siguientes características:
- Al menos 4.5:1 para texto pequeño (menos de 18 puntos para normal o 14 puntos para negrita)
- Al menos 3.0:1 para texto grande (18 puntos y más para normal o 14 puntos y más para negrita)
Notas sobre el contraste de color:
-
Cuando uses
ImageViewoImagepara renderizar contenido gráfico o iconografías, asegúrate de que el contraste entre los colores del primer plano y el segundo plano cumplan con las proporciones recomendadas o las superen. - Las proporciones de contraste se miden según el color aparente del primer y segundo plano de un elemento cuando se muestra en capas sobre otros elementos. Si defines colores en formato ARGB (valores hexadecimales de #AARRGGBB), ten en cuenta que los colores no opacos (aquellos con un valor de canal alfa menor que 255) pueden tener un color aparente diferente debido a que se mezclan con el contenido renderizado debajo de ellos.
- El suavizado de fuentes y el antialiasing pueden afectar el color aparente de algunos elementos de contenido, especialmente el contenido de trazo angosto. Para mejorar la legibilidad, elige una combinación de colores con mayor proporción de contraste o aumenta el ancho de trazo del contenido.
Diseño
Cuando diseñes una interfaz de usuario, elige una paleta con suficiente contraste de color para los colores adyacentes.
- En el caso de las iconografías o los textos, sigue los lineamientos del W3C sobre la proporción de contraste mínima.
- También puedes incluir un tema con mayor contraste o permitir que el usuario elija los colores del contenido principal.
Para obtener más información, consulta los lineamientos de color y contraste de accesibilidad de Material Design.
Prueba
Para verificar manualmente el contraste de color en una app, sigue estos pasos:
- Abre la app.
- Toma una captura de pantalla.
- Con la visualización de imágenes o un software de edición, usa una “herramienta cuentagotas” para extraer una muestra aparente de colores de la captura.
- Usa una calculadora de proporción de contraste para determinar la proporción de contraste de los colores adyacentes.
- Si la proporción de contraste es menor que la definida en los lineamientos del W3C, aumenta el contraste de color para mejorar la interfaz.
Con las herramientas de prueba automatizada de Android, se pueden detectar muchos problemas de contraste. Te recomendamos usar Prueba de accesibilidad para Android para realizar una prueba manual de la app en tu dispositivo. Si quieres realizar pruebas automatizadas, activa la verificación de accesibilidad de Espresso y Robolectric.