1. Introducción
Última actualización: 4/4/2022
El sistema de colores de Material 3 crea esquemas de colores accesibles con el algoritmo de color dinámico, pero ¿qué significa la accesibilidad para el color? ¿De qué manera el nuevo sistema de colores de Material Design crea un esquema de colores accesible y qué herramientas ayudan?
Qué aprenderás
- Cómo se relaciona el color con los lineamientos de accesibilidad y contraste
- Cómo las herramientas pueden ayudar a crear un esquema de colores accesible, realizar ediciones y comprobar el contraste
Requisitos previos
En este lab, nos basaremos en algunos conceptos básicos de diseño.
- Conocimiento de los roles y esquemas de colores actuales de Android
- Conocimiento de Figma
Requisitos
- Cuenta de Figma
- Archivo de Designlab dinámico de colores de Figma
- Complemento de Figma Material Theme Builder
2. Primeros pasos
Configuración
Para comenzar, debes acceder al archivo de Designlab de Figma. Todo lo que necesitas para el lab está en él. Puedes descargar e importar el archivo, o duplicarlo desde la comunidad de Figma.
Primero, accede a Figma o crea una cuenta.
Duplicado de la Comunidad de Figma
Navega hasta el archivo Diseña con colores accesibles o busca “Designing with accessible colors” en la Comunidad de Figma. En la esquina superior derecha, haz clic en Duplicate para copiar el archivo a tus archivos.
Diseño de archivo
Observa que el archivo es independiente y que comienza con una introducción. Cada sección se divide en una fila de mesas de trabajo que están vinculadas entre sí, con algunos conceptos básicos para la sección, seguidos de ejercicios. Las secciones y ejercicios se complementan entre sí y deben completarse de forma secuencial.
En este codelab, se explican esos conceptos y ejercicios con mayor detalle. Lee el codelab para obtener más información sobre las nuevas funciones de Material You.
Comenzando por la mesa de trabajo Intro, hay botones que vinculan las mesas de trabajo en orden. Para acceder al vínculo, haz clic en el botón.
Instala el complemento de Figma
Este codelab depende en gran medida de un nuevo complemento de Figma para generar tokens y esquemas de colores dinámicos. Instala el complemento de Figma directamente desde la página de la comunidad de Figma o busca “Material Theme Builder” en la Comunidad de Figma.
3. Color y accesibilidad
La accesibilidad es la única forma de diseñar para todo el mundo y garantiza que tus productos sean inclusivos para la mayor cantidad de personas posible.
"¿Puedo ver el color en la pantalla?" es solo la primera consideración que debes tener en cuenta cuando diseñes con colores. Las personas perciben el color de distintas maneras según su agudeza visual.
El daltonismo puede implicar la comprobación de las combinaciones de colores para que las personas con esta afección puedan distinguir bien los elementos de la IU.
Si bien es posible que la opacidad y el peso no sean el matiz literal de un color, tienen un gran efecto visual en la percepción del color.
El uso de una opacidad baja crea un color más claro, que puede hacer que el texto sea ilegible. Por ejemplo, alguien que sea miope tendrá problemas para leer texto que esté configurado con un 30% de opacidad a una distancia razonable.
Usa la opacidad con cuidado y sigue siempre los lineamientos sugeridos.
El tamaño de la fuente puede tener un efecto similar, ya que los pesos de las fuentes son más finos en fondos más oscuros. En las impresiones, el uso de una fuente muy fina permite que la tinta se "derrame" y cree texto “claustrofóbico”. Nuestros ojos también crean este efecto en las pantallas cuando intentan rellenar el espacio.
La tipografía fina sobre un fondo oscuro crea un efecto claustrofóbico.
Legibilidad frente a comprensión. A lo largo de este lab, nos referiremos a la legibilidad del texto. La legibilidad mide la facilidad de ver, mientras que la comprensión mide la facilidad de entender.
4. Contraste de color
Los lineamientos de accesibilidad existen para brindarles a diseñadores y desarrolladores una lista de tareas coherente y dirigida por expertos a fin de garantizar el uso de las prácticas recomendadas para crear productos inclusivos. Las WCAG son el estándar habitual y al que se hace referencia en este lab.
El contraste de color es la diferencia entre la luminancia de los elementos en primer y segundo plano, presentada en un formato de proporción. A este criterio de proporción se le otorgan grados. Medir el contraste entre el texto de un botón y su contenedor puede ayudar a determinar si el texto será legible.
Ejemplo con contraste de color incorrecto.
Los lineamientos de contraste de color se dividen en texto y no texto, cada uno con su propio conjunto de calificaciones.
Texto
AA | AAA | |
Texto grande | 3:1 | 4.5:1 |
Texto normal (cuerpo) | 4.5:1 | 7:1 |
No texto
AA | |
No texto (elementos gráficos) | 3:1 |
Intentemos verificar el contraste y ver cómo corregirlo manualmente.
- En Figma, encuentra los colores en los elementos de la IU. Comencemos con texto grande (#C0BEC5), que se encuentra sobre un color de fondo (#F5F5FF). Si ingresas estos colores en primer y segundo plano en un verificador de contraste en línea, se mostrarán errores en todas las calificaciones.
- El texto es demasiado brillante para el color de fondo. En el comprobador de contraste en línea, ajusta el color de primer plano con el selector de color a un color más oscuro hasta que pase AAA.
- En Figma, aplica el nuevo color de paso al texto grande.
- Sigue el mismo proceso para los botones y el cuerpo del texto, y asegúrate de verificar el color del texto y de fondo de cada uno.
- Usa el resultado en Graphical Objects and User Interface Components para aplicar el mismo proceso a los íconos**.**
- Usa el color nuevo en Figma para cada elemento. Todos los elementos ahora deberían pasar las calificaciones de contraste.
Ejemplo con contraste de colores de paso.
Probablemente parezca un proceso largo y es posible que los resultados hayan creado una paleta de colores menos armoniosa. Aquí es donde entran en juego las herramientas.
5. Diseña con luminancia
El nuevo sistema de colores dinámico para Material Design se diseñó según la luminancia en vez del matiz. Por lo tanto, si se quitaran el matiz y la crominancia, se vería el contraste entre los tonos.
Cuando se extrae un color, se generan 5 colores clave desplazados a partir de los cuales se generan las paletas tonales. Una paleta tonal consiste en trece tonos, incluidos el blanco y el negro. Un valor tonal de 100 equivale a la idea de luz al máximo y da como resultado el color blanco. Cada valor tonal entre 0 y 100 expresa la cantidad de luz presente en el color.
El sistema de las paletas tonales es fundamental para que cualquier combinación de colores sea accesible de forma predeterminada.
La combinación de colores según la tonalidad, en lugar del valor hexadecimal o el matiz, es uno de los sistemas clave que hacen que cualquier resultado de color sea accesible. Los productos que usan colores dinámicos cumplirán con los requisitos debido a que las combinaciones algorítmicas que puede experimentar un usuario están diseñadas para cumplir con los estándares de accesibilidad.
Los elementos con una luminancia similar no tienen un contraste adecuado para la legibilidad, mientras que los elementos con diferentes valores de luminancia son más distinguibles.
El color dinámico de Material You está diseñado para funcionar en contextos impredecibles. Para administrar las relaciones de contraste en diversos contextos de visualización, los niveles de luminancia son el atributo clave que permite que los colores se combinen correctamente, incluso sin que el equipo de productos pruebe cada combinación de colores específica.
6. Crea un tema accesible
El compilador de temas genera tokens de Material Design como estilos de Figma, lo que te permite visualizar un color dinámico y crear un tema personalizado. Esto se hace mientras se sigue el sistema de colores de Material 3 para garantizar que se generen colores accesibles en el esquema de colores.
- En la ventana modal del complemento, haz clic en Custom. De esta forma, se cambia a un tema personalizado. El tema de Material ya se generó, pero también puedes crear uno nuevo si lo deseas. Para obtener más información, consulta cómo visualizar un color dinámico.
- A continuación, establece el color de clave primaria. El principal puede ser el color principal de tu marca o el color principal más utilizado de los elementos destacados. Haz clic en el color con la etiqueta Primary para abrir el selector de colores y elige un color. El color principal se usa para el color de origen, al igual que el color de origen en la configuración dinámica.
Agrega colores a MTB.
- El resto de los colores clave se propagan según el color principal. Es decir, no es necesario agregar colores adicionales si no los necesitas. También puedes agregar un color secundario y terciario.
- El esquema de colores muestra los colores clave interpretados a partir de los colores de entrada, las paletas tonales generadas y los esquemas de colores resultantes con funciones de color. Están disponibles tanto los esquemas claros como los oscuros.
- El lab proporcionó una IU de ejemplo para ver el esquema de colores aplicado. Selecciona el componente de IU de la app y haz clic en Swap dentro del complemento.
Esquema de colores con simulación conectada.
Para estos ejercicios, Material Theme Builder ya generó los tokens necesarios en el archivo de Figma.
7. Comprueba el contraste con Material Theme Builder
Increíble, pero sabemos que querrás actualizar algunos de estos estilos con diferentes colores de forma manual. Material Theme Builder incluye la comprobación de contraste incorporada de los colores del esquema principal para ayudarte a tomar estas decisiones.
- Dado que los tokens se crean como estilos, también podemos establecer el valor del color generado. Dentro de los estilos de Figma, desplázate hacia abajo hasta el color principal del tema actual y selecciona el ícono Editar estilo que se encuentra a la derecha.
- Actualiza el color principal en las propiedades. Esto se refleja en el resultado de color y en la IU de la app. El algoritmo de color no generó este color, por lo que no podemos garantizar la accesibilidad.
- En el menú de complementos, haz clic en Check Contrast y, luego, vuelve a abrir la ventana modal Edit style para el color principal. Se verifica el contraste y se muestra la calificación de contraste.
Contraste en el diálogo de estilo de Figma.
8. Felicitaciones
¡Increíble! La accesibilidad debe ser una parte fundamental de tu proceso y, con Material Design y Material Theme Builder, es aún más fácil.
Si tienes alguna pregunta, no dudes en consultarnos en cualquier momento mediante @MaterialDesign en Twitter.
Mira más instructivos y contenido de diseño en youtube.com/MaterialDesign.