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.
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
Contenido
Bordes, textos principales y secundarios
Fondo
Detrás del contenido, predominancia del color blanco
Cabecera
Únicamente para el fondo de cabecera, tras el título
Soporte
Diversos usos según el estado
Advertencia
Foco, precaución, en espera
Éxito
Confirmación, publicado, correcto
Información
Aviso, dato relevante
Alerta
Error, peligro, eliminar
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 sobre colores light
Pueden encontrarse en mensajes de estado y bloques de información.
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.
#819eae
#aa3c2b
#819eae
#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.
#819eae
#aa3c2b
#819eae
#00607a
#013c53
#ffdc00
#ffaa00
#ed020d
#646464
#e1e1e1