DESY

Sistema de Diseño del Gobierno de Aragón.

Color

Paletas de colores accesibles para elementos que pueden ser primarios, de interacción, de soporte, para cabeceras, contenidos, fondo o para gráficas. El correcto uso del color ayudará al usuario a navegar, interpretar e interactuar de forma óptima con tu interfaz.

Colores base

Hemos definido varias familias representadas por los colores base, cada una con un significado semántico asociado. A partir de cada familia surge una la paleta de variantes de color para crear una interfaz accesible y consistente, que usaremos a lo largo de los elementos y componentes que forman este sistema de diseño.

primary
neutral
warning / success / info / alert
heading
Gráficas

Significado del color

Con el objetivo de identificar mejor esta semántica, cada familia consta de varios temas según su tono. El nombre de cada color referencia a sus clases, de más general a más específica.

El término "Rol" sirve para agrupar varias familias o temas, de esta forma identificamos mejor a qué contexto corresponde cada color independientemente de la terminología definida en el código.

Interacción: primary-base

Rol: familia-tema

Fondo: neutral-light

Rol: familia-tema

Soporte: alert-light

Rol: familia-tema

Roles, familias y temas

Dentro de cada familia existen variantes del color base que forman una paleta. El uso de estas variantes depende del componente, el contexto y las limitaciones de accesibilidad.

Interacción

Botones de interacción y enlaces

primary-light / primary-base / primary-dark

Contenido

Bordes, textos principales y secundarios

neutral-base / neutral-dark / black

Fondo

Detrás del contenido, predominancia del color blanco

white / neutral-lighter / neutral-light

Cabecera

Únicamente para el fondo de cabecera, tras el título

heading-base / heading-dark

Soporte

Diversos usos según el estado

Advertencia

Foco, precaución, en espera

warning-light / warning-base / warning-dark

Éxito

Confirmación, publicado, correcto

success-light / success-base / success-dark

Información

Aviso, dato relevante

info-light / info-base / info-dark

Alerta

Error, peligro, eliminar

alert-light / alert-base / alert-dark

Bordes

Solemos utilizar dos grosores de borde: 1 o 4 píxeles, según dónde se encuentren. La familia a la que pertenece dependerá de su función dentro de la interfaz.

Grosor 1px

Separadores y bordes

Contenido: black

Bordes de campos de texto

Cabecera de tablas

Contenido: neutral-base

Separadores de contenidos

Bordes de tarjetas

Bordes de menús

Soporte: alert-base

Mensajes de error

Borde de campos de texto

Grosor 4px

Mensajes, notificaciones y avisos

Contenido: black

Mensajes de error

Borde de campos de texto

Contenido: neutral-dark

Bordes superiores de tarjetas con imagen y sección de enlaces

Contenido: neutral-base

Mensajes de información

Detalles de estados activos

Campos condicionales

Soporte: success-dark

Aviso de éxito

Correcto funcionamiento de ítem

Soporte: success-dark

Aviso de errores

Ítem con errores

Interacción: primary-dark

Mensajes de información

Detalles de estados activos

Accesibilidad en colores

El contraste de color entre el texto y los elementos interactivos debe cumplir el mínimo AA de WCAG tanto para herramientas internas como las destinadas a la ciudadanía. Al ser un sistema de diseño basado en el fondo blanco, el uso de texto sobre masa de color está limitado a botones y ciertos elementos concretos.

Texto sobre colores base

Únicamente se usan en botones. El peso de la fuente debe ser Semibold y tener un tamaño mínimo de 16 píxeles.

Texto
Texto
Texto
Texto
Texto

Texto sobre colores light

Pueden encontrarse en mensajes de estado y bloques de información.

Texto
Texto
Texto
Texto
Texto

Paleta para gráficas

Con la creación de una guía de estilos para entornos digitales, surge la necesidad de configurar una paleta de colores accesible para utilizar en gráficas y diagramas. Recomendamos utilizar la primera cuando tengamos cinco o menos elementos, ya que aseguramos la accesibilidad AA de WCAG. En caso de tener más de 5 y hasta 10 ítems, tenemos una segunda paleta ampliada.

También deberás tener en cuenta que el tamaño, peso y color del texto deben cumplir accesibilidad cuando los coloques sobre estos fondos.

Paleta accesible DESY ARAGON

Mezcla del azul de interacción primario definido en DESY y el color Tierra de la imagen corporativa del GA. Paleta accesible para usuarios con tricromía y contraste AA.

#4d1f2e

#aa3c2b

#739ba5

#00607a

#013c53

Gráfica con la paleta de colores DESY ARAGON

Paleta ampliada DESY ARAGON

Toma como referencia la primera paleta y la amplía con colores complementarios definidos en la imagen de marca del GA. Se intenta cumplir la accesibilidad y legibilidad dentro de lo posible para usuarios con tricromía, aunque se debería procurar evitar la superposición de los colores azul-amarillo. Los valores de contraste del texto en su interior cumplen con accesibilidad AA.

#4d1f2e

#aa3c2b

#739ba5

#00607a

#013c53

Gráfica con la paleta de colores ampliada DESY ARAGON

#bc8a01

#ed6c02

#ed020d

#646464

#92949b