Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 proyecto, ya sea el color escogido para el proyecto o el color de la marca del cliente para el cual tutenlabs se está desarrollando TutenLabs un software a medida de “white label“.

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 derecha.

Iframesrchttps://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FOyzFk4aIgtOuASyfA9QnYv%2FDesign-System%3Fnode-id%3D61%253A93width100%frameborderhideheight300pxImage Added

Colores de sistema

El sistema necesita una paleta de colores estándar para las diferentes respuestas. Dejo los colores transversales para esto.

Link a Figma

Iframesrchttps://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FOyzFk4aIgtOuASyfA9QnYv%2FDesign-System%3Fnode-id%3D183%253A0width100%frameborderhideheight300pxImage Added

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.