Principios
- Accesible: todas las combinaciones de color definidas deben pasar los requerimientos de contraste mínimos de accesibilidad especificados por WCAG 2.2.
- Coherente: se deben mantener los significados estipulados para cada color. Por ejemplo, el color rojo se relaciona con peligro, y el verde con éxito.
- Funcional: nuestro sistema propone que los colores estén atados a un propósito y significado específico. No deben utilizarse de forma arbitraria y no tienen un objetivo decorativo.
- Moderada: el uso excesivo de color en una interfaz puede reducir la claridad de la comunicación y distraer a las personas usuarias. Recomendamos dosificar el color sólo para resaltar información o acciones clave.
- Flexible: trabajamos con variables para poder generar un sistema robusto y escalable.
Accesibilidad
Los colores de nuestra paleta fueron seleccionados y testeados para poder cumplir con los requerimientos de accesibilidad de WCAG 2.2 en contraste y uso del color. Evitá usar colores por fuera de esta paleta, ya que puede generar experiencias inaccesibles para algunas personas usuarias.
Uso del color
El color no debe usarse como el único medio para transmitir información, indicar una acción, generar una respuesta o distinguir un elemento visual. Dado que muchas personas usuarias tienen dificultades para percibir el color, es importante reforzar el mensaje añadiendo otros elementos.
Contraste
Un nivel de contraste AAA implica que la presentación de texto e imágenes de texto tiene un ratio de contraste de por lo menos 7:1, con excepción de textos grandes que deben tener un ratio de 4.5:1. También se encuentran exentos los textos o imágenes que sean incidentales (es decir, que son parte de componentes inactivos de la interfaz), los puramente decorativos y los logotipos.
Combinaciones de texto y fondo
En la sección de paleta vas a encontrar muestras de cada color con una etiqueta del nivel de conformidad que pasa la combinación de texto y fondo. Recomendamos siempre utilizar combinaciones AAA para garantizar el máximo contraste posible. Si encontrás muestras que no tienen ni la etiqueta AA o AAA, es porque esa combinación no pasa accesibilidad y, por lo tanto, debe evitarse su uso.
Contraste para elementos que no son de texto
Los componentes de una interfaz, sus estados, y los objetos gráficos deben tener como mínimo un ratio de contraste de 3:1 con respecto a los colores más cercanos (adyacentes).
Los criterios de éxito que tenemos en cuenta son:
Uso
Paleta global
Incluye 10 colores, cada uno con 11 tonalidades. Nuestra paleta se compone de colores de marca relacionados a la Ciudad de Buenos Aires y de colores que cumplen un rol específico dentro de la interfaz a nivel comunicacional.
Construcción en capas
Construimos nuestra paleta en base a diferentes capas que van asignando roles a cada color:
- Color base: es el código hexadecimal puro y no se toma aún dentro de la arquitectura como una capa formal.
- Capa primitiva: contiene todos los códigos hexadecimales de la paleta y los clasifica por nombre y tonalidad del color. Esta capa se encuentra oculta. Los colores primitivos sólo pueden utilizarse directamente en el diseño de ilustraciones decorativas.
- Capa semánticos: asigna roles a los colores para textos, fondos, bordes y estados globales.
- Capa funcional: asigna variables a roles dentro de componentes específicos, como por ejemplo el fondo de un botón o el borde de una alerta.
De esta forma generamos un sistema con una estructura intuitiva y fácil de utilizar en los diseños, permitiendo conocer el rol o la función del color ya desde su nomenclatura.
Variables en Figma
La paleta de color está disponible en Figma en forma de variables. El uso de variables facilita el mantenimiento y permite trabajar en un sistema escalable y robusto.
