El color debe ser aplicado siempre con un objetivo funcional, que facilite una interacción intuitiva para el usuario.
| 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 #E3AE00 |
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 |
| 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
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 |
| 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
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.