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 check_circle
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
4.52:1 check_circle check_circle
4.11:1 check_circle
Gris
#808080
4.52:1 check_circle check_circle
4.11:1 check_circle
Gris Claro A
#EAEAEA
1.58:1 cancel
11.77:1 check_circle check_circle
Gris Claro B
#F0F0F0
2.03:1 cancel
9.13:1 check_circle check_circle
Gris Claro C
#F6F6F6
2.03:1 cancel
9.13:1 check_circle check_circle

Paleta de Colores de Feedback

Color Contraste / Blanco Contraste / Negro
Verde [Ok]
#00AA00
3.11:1 check_circle
6.75:1 check_circle check_circle
Amarillo [Alerta]
#FEC60D
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.11:1 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.