Color
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
-
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
-
#bc8a01
#ed6c02
#ed020d
#646464
#92949b