Estilos Índice de páginas
Color
Paletas de colores accesibles que ayudarán a la persona a navegar, interpretar e interactuar de forma óptima con tu interfaz.
Índice de apartados de esta página
- Colores base
- Significado del color
- Roles, familias y temas
- Bordes
- Accesibilidad en colores
- Paleta para gráficas
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 de componentes
-
Contenido: black
Bordes de campos de texto
Cabecera de tablas
-
Contenido: neutral-base
Separadores y divisores
Bordes de cards
Bordes de modales
-
Interacción: primary-base
Botones
-
Soporte: alert-dark
Mensajes de error
Píldoras
-
Soporte: warning-dark
Píldoras
-
Soporte: success-dark
Píldoras
Grosor 2px
Condicional
-
Interacción: primary-dark
Borde izquierdo de bloques condicionales que aprecen tras seleccionar un input
Grosor 4px
Mensajes, notificaciones y avisos
-
Soporte: success-dark
Aviso de éxito
-
Soporte: success-dark
Aviso de errores
Ítem con errores
-
Interacción: primary-dark
Notificaciones y aviso de información
-
Contenido: neutral-dark
Borde superior de algunos cards
Borde inferior de item activo en menú horizontal con aspecto de navegación
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
