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 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.