import { Meta } from '@storybook/addon-docs';

import image01 from './assets/colors/bn_ref.png';
import image02 from './assets/colors/colores_elementales.png';
import image03 from './assets/colors/colores_tetraedricos.png';
import image04 from './assets/colors/colores_contraste.png';
import image05 from './assets/colors/escala_grises.png';

<Meta title="Lenguaje de diseño/Colores" />

<style>{`

  table {
      margin: 0 auto !important;
  }
  tr {
    background-color: white !important;
  }

  th, td {
    vertical-align: top;
    padding-top: 1rem !important;
  }

`}</style>

# Colores

El color es un elemento fundamental del lenguaje visual. No solo nos permite comunicar la identidad, sino que además nos sirve para reforzar la interfaz de usuario y establecer códigos en la comunicación.

### Colores básicos

El sistema de diseño de la Seguridad Social se basa en dos duplas básicas, una **dupla de blanco y negro**, que se compone de una combinación de los tonos de referencia para los colores blanco y negro y que sirve de lienzo fundamental, y una **dupla de color** para los colores elementales que establecen el carácter de cada tema y por ende de la solución digital, un **color principal** que proporciona la identidad propia, y un **color complementario**, que actúa como elemento de contraste. Estos colores establecen las **dos duplas de colores primarios** sobre la que se construye el sistema de diseño completo de la Seguridad Social.

Como definición general de colores, establecemos los colores de referencia de la dupla de **blanco y negro** como el #FFFFFF (blanco) y #161616 (negro). No usamos el negro puro (#000000) por nuestros principios de universalidad y usabilidad, al ser este un color muy poderoso y porque en realidad no existe casi nada que sea negro absoluto, con lo que el cerebro humano no está acostumbrado a procesarlo de manera natural. Utilizamos un color que se parezca mucho al negro, un gris muy oscuro, que mantiene todas las propiedades de contraste con el blanco y con otros colores, mucho más fácil de procesar para el ojo humano.

<center><img src={image01} width="600"/></center>

La marca principal de la Seguridad Social se basa en dos colores elementales, el azul como **color principal** (#0129AE) que en el canal digital se caracteriza por su versión más eléctrica y potente que destaca y proporciona una identidad propia, y el amarillo como **color complementario** (#FDCB00), que proviene del Gobierno de España y que actúa como elemento de contraste.

Para estos colores se definirán tres **versiones de intensidad** estableciendo así triángulos de color que permitirán la generación de efectos visuales y la activación de estos. Estas versiones son la versión de **color puro**, una versión de **énfasis** más oscura, y una versión **suave** más clara. El contraste entre estas versiones facilita y dinamiza la interacción del usuario con los distintos elementos de color.

Así pues, en el tema principal de la Seguridad Social, definimos la dupla básica de color sobre la que se construye el tema principal del sistema de diseño de la Seguridad Social con sus versiones de énfasis (matiz oscuro) y suave (matiz claro).

<center><img src={image02} width="600"/></center>

Adicionalmente, cada tema del sistema de diseño de la Seguridad Social podrá adaptar las duplas de colores, tanto la definición de blanco y negro propia (aunque se recomienda respetar la definición general), como los colores principal y complementario, estableciendo así sus características propias con el objeto de comunicar de mejor manera su identidad y función.

### Colores complementarios

La dupla de colores básica se ve complementada por un conjunto de **colores de carácter** para la definición de los distintos servicios o elementos constituyentes. Estos colores ofrecen un conjunto de códigos de color que complementan a los básicos y que permite enriquecer visualmente y establecer identidades propias para ciertos elementos dentro de las soluciones digitales.

En su tema principal el sistema de diseño de la Seguridad Social, establece un conjunto de colores tetraédricos distribuidos en la paleta completa de los ejes de color.

<center><img src={image03} width="600"/></center>

El sistema de diseño ofrece así un grupo de colores accesorios a las duplas de colores primarios que pueden ser integrados en las distintas soluciones adaptados a los temas propios.

### Otros colores

Adicionalmente, el sistema de diseño de la Seguridad Social establece un conjunto de **colores con significado** para su uso en el diálogo con el usuario. Estos colores se usan según la definición universal de colores con funciones tipo de notificación y alerta, adaptados al carácter de la Seguridad Social, azul para información, rojo para error, verde para éxito y amarillo para avisos

Los colores con significado tienen dos **versiones de contraste**, una regular, pensada par ser utilizada en fondos oscuros, y otra más clara, para fondos claros. El sistema proporciona ambas familias de color de manera que cada tema pueda decidir cual de los dos se adapta mejor a su diseño particular.

Estos colores, los definimos de manera genérica dentro de **Grafito** según la siguiente tabla de colores. Incluimos además un matiz adicional oscuro para el rojo que puede ser utilizado en momentos críticos (alertas, peligro…) como elemento de contraste y para indicar interacciones.

<center><img src={image04} width="600"/></center>

De igual manera a los anteriores estos colores se adaptarán dentro de cada tema de manera que se ajusten a la identidad visual de cada solución, aunque por coherencia entre soluciones se recomienda, cuando sea posible, con el objeto de unificar la interacción del usuario y proporcionar una sensación de ecosistema dentro de la Seguridad Social.

Por último, y buscando siempre la simplicidad y efectividad del diseño, el sistema de diseño de la Seguridad Social, ofrece una completa **escala de grises** que proporciona el contrapunto a los colores anteriores, fomenta la estabilidad del propio Sistema de Diseño y permite la particularización de comportamientos de los distintos elementos visuales dentro de cada tema.

Esta escala de grises se define a continuación de manera genérica para todos los temas de la Seguridad Social.

<center><img src={image05} width="550"/></center>

Se recomienda también que se mantenga la consistencia de la escala de grises en todos los temas del sistema de diseño, aunque el uso de los mismos puede ser diferente en función de su integración en los distintos códigos de color de los temas. En cualquier caso, por simplicidad de diseño, se desaconseja emplear otros tonos de grises intermedios en los temas de las soluciones digitales.

### Colores y accesibilidad

Un diseño accesible, no solo ayuda a los usuarios con discapacidades, sino que facilita experiencias mejores para todos los ciudadanos. Un producto accesible debería ofrecer a todos los usuarios una **experiencia de calidad** y **adaptarse a los usuarios y sus situaciones**.

**Grafito**, al estar basado en Carbon, sigue los **estándares** del [World Wide Web Consortium](https://href.li/?https://www.w3.org/WAI/), y de la sección 508 de [Web Content Accessibility Guidelines](https://href.li/?https://www.w3.org/TR/WCAG21/) AA según la [IBM Accessibility Checklist](https://href.li/?https://www.ibm.com/able/requirements/requirements/), y se enfoca en la creación de patrones perceptibles, operables, comprensibles y robustos para todos los usuarios. En la creación y uso de cada uno de los elementos y componentes, cae la responsabilidad de respetar este punto, y con ello de componer productos digitales accesibles.

Más concretamente, nuestro sistema de diseño se adapta a la Norma UNE 139803:2012 y sus niveles definidos **A y AA** como **niveles mínimos** de accesibilidad obligatorios, y el **AAA** como **recomendable**, más allá de lo indicado en el Real Decreto 1494/2007, que especifica el grado de accesibilidad aplicable a las páginas de Internet de las Administraciones Públicas, estableciendo como nivel mínimo obligatorio el cumplimiento de las prioridades 1 y 2 de la Norma UNE139803:2004, una versión anterior de esta. Esta es una norma española que establece los requisitos de accesibilidad para los contenidos web y se basa en las pautas de accesibilidad para el contenido web (*WCAG*2.0 de 2008) de la Iniciativa para la Accesibilidad Web (*WAI*) del Consorcio de la Web (W3C).

Es clave pues, a la hora de definir los colores de cada tema, que estos mantengan las características de accesibilidad y contraste deseadas, y es por ello que para cada color que sea definido en los temas, tanto las duplas de colores primarios, como los colores de carácter, así como el resto de colores (significados, grises…), se debe calcular los **ratios de contraste** que permitan saber si entre colores se establecen diferencias suficientes y que se cumplen las normativas de accesibilidad establecidas entre los colores de letra y de fondo.

En la definición de cada color de los temas se incluirá, tal y como hemos visto en las fichas de la dupla blanco y negro básica, además del nombre y su código hexadecimal los distintos parámetros de accesibilidad, tanto en combinación contra el negro como contra el blanco: ratio, nivel de accesibilidad en elementos gráficos (fail, A o AA) como en nivel de accesibilidad con textos normales y grandes (fail, A, AA y AAA).