v1.54.18

Color

El color debe ser aplicado siempre con un objetivo funcional, que facilite una interacción intuitiva para el usuario.

Simbología de contraste

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

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.13: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
#707070
4.95:1
check_circle check_circle
4.24:1
cancel
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
Gris oscuro A
#9C9C9C
2.74:1
cancel
7.64:1
check_circle check_circle
Gris oscuro B
#C6C6C6
1.7:1
cancel
12.29:1
check_circle check_circle

Paleta de Colores de Feedback

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

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.