Color
El color debe ser aplicado siempre con un objetivo funcional, que facilite una interacción intuitiva para el usuario.
Paleta de Color Primaria
| Color | Contraste / Blanco | Contraste / Negro |
|---|---|---|
Celeste #0176DE | 4.52:1 check_circle check_circle | 4.11:1 check_circle |
Azul #173F8A | 9.93:1 check_circle check_circle | 1.87:1 cancel |
Azul oscuro #03122E | 18.59:1 check_circle check_circle | 1:1 cancel |
Amarillo #FEC60D | 1.58:1 cancel | 11.77:1 check_circle check_circle |
Amarillo oscuro #E3AE00 | 2.03:1 cancel | 9.12:1 check_circle check_circle |
Paleta de Color Secundaria
| Color | Contraste / Blanco | Contraste / Negro |
|---|---|---|
Negro #000000 | 21:1 check_circle check_circle | 4.11:1 check_circle |
Gris oscuro A #707070 | 4.95:1 check_circle check_circle | 4.24:1 cancel |
Gris oscuro B #9C9C9C | 2.74:1 cancel | 7.64:1 check_circle check_circle |
Gris oscuro C #C6C6C6 | 1.7:1 cancel | 12.29:1 check_circle check_circle |
Gris claro A #EAEAEA | 1.2:1 cancel | 17.45:1 check_circle check_circle |
Gris claro B #F0F0F0 | 1.13:1 cancel | 18.42:1 check_circle check_circle |
Gris claro C #F6F6F6 | 1.08:1 cancel | 19.43:1 check_circle check_circle |
Blanco #FFFFFF | 1:1 cancel | 21:1 check_circle check_circle |
Paleta de Colores de Feedback
| Color | Contraste / Blanco | Contraste / Negro |
|---|---|---|
Verde éxito #00AA00 | 3.11:1 check_circle | 6.75:1 check_circle check_circle |
Amarillo advertencia #E3AE00 | 2.03:1 cancel | 10.32:1 check_circle check_circle |
Rojo error #F24F4F | 3.5:1 check_circle | 6.01:1 check_circle check_circle |
Celeste info #0176DE | 4.52:1 check_circle check_circle | 4.65:1 check_circle check_circle |
cancel Contraste no cumple con lo mínimo requerdio por el estandar WCAG 2.0
check_circle Cumple con el estandar WCAG 2.0 AA para textos desde 14px bold en adelante*
check_circle check_circle Cumple con el estandar WCAG 2.0 AA para textos desde 14px regular hasta 10px regular*
*Utilizando la tipografía Roboto
Criterios de aplicación
Diseño estético y minimalista:
Al limitar el uso
del color en la interfaz, las áreas que sí tienen color se vuelven más
relevantes. Por esto es importante mantener una lógica limpia y
minimalista al aplicar color.
Comunicación e Imagen de Marca:
El uso de la
paleta primaria debe reforzar la presencia de marca dentro de todos
los sitios del ecosistema UC. Los colores de marca deben ser
utilizados en momentos clave y de manera consistente, con el objetivo
de que el usuario asocie esos colores con acciones e información
específicas
Accesibilidad:
Se trabajó sobre la paleta
actual de UC.cl mejorando el contraste para cada uno de los colores.
El texto y los elementos interactivos deben cumplir con los estándares
de accesibilidad WCAG 2.1, manteniendo siempre un alto nivel de
contraste y legibilidad.
Claridad y Jerarquía:
El color debe definir
jerarquías y dirigir la atención a los elementos interactivos de la
interfaz. Los elementos más relevantes de una interfaz siempre deben
utilizar color para destacar sobre el resto.