Introducción
El color en nuestro sistema de diseño contempla la construcción de una paleta de colores vinculado al concepto “white label“. Donde tomando el color primario de cada proyectoMantener interfaces digitales consistentes y atractivas en todo tutenlabs, ya sean aplicaciones o experiencias, exige una guía ampliada sobre el uso del color. Los siguientes conceptos son la base a medida que nos esforzamos por lograr el equilibrio y la armonía a través de nuestro diseño de interfaz de usuario.
La aplicación de la paleta de colores aporta una coherencia unificada y reconocible a la amplia gama de productos e interfaces digitales de tutenlabs. Esta coherencia se basa en un conjunto de reglas bien definidas sobre cómo trabajar con la biblioteca de componentes.
Fórmula de composición
La paleta de colores de nuestro sistema de diseño está vinculada al concepto “white label“ el cuál contempla la utilización del color primario del cliente (en el ejemplo el color primario es el azul).
La utilización del color primario se ve reflejado en nuestros componentes en las zonas de color azul, el cual se reemplazaría por el color primario seleccionado por cada proyecto o cliente, ya sea el color escogido para el proyecto o el color de la marca
.
Fórmula de composición
Para construir el color en cada uso tenemos la selección del color primario el cual pasará por un proceso de graduación de tintas y sombras para obtener una paleta completa en relación a este color. Tal cual como se muestra en el ejemplo a la derechacontinuación.
| src | https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FOyzFk4aIgtOuASyfA9QnYv%2FDesign-System%3Fnode-id%3D61%253A93 |
|---|---|
| width | 100% |
| frameborder | hide |
| height | 600px |
Estados
AccessibilityColores de sistema
El sistema necesita una paleta de colores estándar para las diferentes respuestas. Los cuales son estándar y se aplican según definición en cada caso y componente.
Sombras
Accesibilidad
La accesibilidad se trata de empatizar con el usuario, y tener una web no accesible, supone dejar de lado a casi 50 millones de habitantes de América Latina.
Existe un porcentaje de la población con problemas para percibir los colores, ya sea a la hora de diferenciar determinados colores o porque padecen alguna forma de ceguera que solo les permite percibir un espectro reducido de colores. Por esto, es muy difícil determinar qué opciones de colores son las más idóneas a utilizar.
El contraste de luminosidad entre el color del fondo y el color del texto debe ser suficiente para garantizar una buena legibilidad del texto en situaciones desfavorables de mucha luz, pantallas con poco contraste o brillo y para personas con problemas de visión.
Las pautas de accesibilidad del contenido web establecen en su nivel AA los ratios de contraste suficientes de 4.5 para textos menores a 18 puntos y de 3 para textos mayores a 18 puntos.
Podemos decir que con mayor contraste mayor facilidad de lectura del texto, con independencia de la combinación de colores. En la mayoría de las situaciones, lo más recomendable es texto negro sobre fondo blanco o colores muy cercanos a estos, como gris oscuro y tonos sepia.
Leer más detalle aquí.
Aquí hay algunas herramientas para medir el contraste.