Los colores que seleccionas para la interfaz de tu aplicación afectan a la facilidad con la que los usuarios pueden leerla y entenderla. Un contraste de color suficiente facilita la lectura y compresión de texto e imágenes.
Además de las ventajas que ofrece a los usuarios con problemas de visión, un contraste de color adecuado ayuda a todos los usuarios a consultar la interfaz en los dispositivos cuando se encuentran en situaciones con poca o demasiada iluminación (por ejemplo, cuando la pantalla tiene poco brillo o está expuesta a la luz directa del sol).
Implementación
Al implementar la interfaz de usuario de una aplicación, debes definir los colores del fondo y del primer plano con un contraste de color adecuado.
La "relación de contraste" es el cálculo que representa la diferencia en la luminosidad (o intensidad de luz emitida) entre dos colores que aparecen juntos en una pantalla. Los resultados oscilan entre 1 y 21 (normalmente se representa como 1:1 y 21:1) y cuanto mayor sea el número, más aumentará el contraste. Hay muchas herramientas disponibles con las que puedes comprobar la relación de contraste entre dos colores, como esta calculadora de la relación de contraste de color.
Si utilizas TextView para mostrar texto, usa android:textColor y android:background para definir los colores del primer plano y del fondo con una relación de contraste alta. Si utilizas Text en Compose, usa el parámetro de color y Modifier.background para definir los colores del primer plano y del fondo con una relación de contraste alta.
El consorcio W3C recomienda:
- Como mínimo 4,5:1 para texto pequeño (tamaños inferiores a 18 puntos para letra normal o 14 para negrita)
- Como mínimo 3,0:1 para texto grande (tamaños superiores a 18 puntos para letra normal o 14 para negrita)
Notas sobre el contraste de color:
-
Si utilizas
ImageViewoImagepara procesar contenido gráfico o iconografía, comprueba que el contraste entre los colores del primer plano y del fondo coincida o supere las relaciones de contraste recomendadas. - Las relaciones de contraste se miden en función del color aparente del primer plano y del fondo de un elemento cuando se superpone sobre otros elementos. Al definir los colores en un formato ARGB (valores hexadecimales de #AARRGGBB), ten en cuenta que los colores translúcidos (aquellos cuyo valor de canal alfa no supera 255) pueden tener un color aparente distinto al combinarse con el contenido procesado.
- El suavizado de las fuentes y el filtro antialiasing pueden afectar al color aparente de cierto contenido, especialmente al que tenga poca anchura de trazo. Selecciona una combinación de colores con una relación de contraste más alta o aumenta el ancho del trazo del contenido para mejorar la legibilidad.
Diseño
Al diseñar una interfaz, ten en cuenta que debes seleccionar una gama de colores con un contraste adecuado para los colores adyacentes.
- En los casos de texto e iconografía, sigue las directrices del consorcio W3C que están relacionadas con las relaciones de contraste mínimas.
- Te recomendamos que incluyas una opción para seleccionar un tema con contraste alto o que permita al usuario seleccionar colores para el contenido primario.
Para obtener más información, consulta las directrices de color y contraste de Material Design.
Pruebas
Sigue estos pasos para comprobar manualmente el contraste de color en una aplicación:
- Abre la aplicación.
- Haz una captura de pantalla.
- Si utilizas un software de visualización o de edición de imágenes, usa una "herramienta de cuentagotas" para extraer una muestra de colores aparente de la captura de pantalla.
- Utiliza una calculadora de la relación de contraste para determinar la relación de contraste de los colores adyacentes.
- Si la relación de contraste es inferior a la que definen las directrices del consorcio W3C, es posible que la apariencia de la interfaz mejore al aumentar el contraste de color.
Las herramientas de prueba automáticas de Android pueden detectar muchos problemas relacionados con el contraste de color. Te recomendamos que utilices Test de Accesibilidad para Android para probar tu aplicación manualmente en el dispositivo. Si quieres realizar pruebas automáticas, activa las comprobaciones de accesibilidad en Espresso y Robolectric.