Ayer estuvo soleado y a 85 grados. Hoy, hace frío, viento y llueve a 54 grados.
Eso es contraste.
Los diseñadores tienen la oportunidad de mantener las cosas homogéneas; las fuentes, los elementos, los diseños y los tamaños podrían permanecer consistentes y el mundo no se acabaría.
Pero así no es como funciona el diseño: estamos tratando de hacer las cosas diferentes, destacar y decir "¡mírame!" Así que aprendemos sobre combinación de fuentes, usamos múltiples elementos, rehacemos nuestros diseños y redimensionamos y realineamos nuestro contenido para hacerlo más interesante y accesible para los espectadores.
El contraste de color es otro elemento con el que los diseñadores juegan no solo por efecto estético sino también por accesibilidad general.
Contraste de color en el diseño
La palabra "contraste" simplemente significa "diferencia".
¿Qué es el contraste de color?
Los colores contrastantes son colores que difieren entre sí. Los niveles de contraste varían de alto a bajo, dependiendo de su posición en la rueda de colores. Por ejemplo, los colores que están directamente opuestos en la rueda de colores tienen el mayor contraste posible, mientras que los colores que están uno al lado del otro tienen un bajo contraste.
Por ejemplo, rojo-naranja y naranja son colores que tienen bajo contraste; rojo y verde son colores que tienen alto contraste.
Si bien muchos esquemas de color contrastantes son interesantes y a veces incluso estéticamente agradables de ver, los colores contrastantes sirven para un propósito adicional: la accesibilidad del usuario.
Contraste de color por el bien de la estética
Por decir lo menos, elegir colores de alto contraste para un diseño es un movimiento audaz. A continuación se presentan ejemplos de colores de alto contraste. Estos pares están directamente opuestos en la rueda de colores.
Definitivamente son mucho para mirar. Pero a veces, la audacia vale la pena. ¿No te resultan un poco familiares esos colores?
Fuente: Gerard Malanga, Andy Warhol
El arte y el diseño que utilizan colores de alto contraste realmente "destacan". Mirar diseños como estos crea una experiencia única, pero tiende a volverse un poco doloroso.
Debido a esta responsabilidad, el alto contraste de color no siempre es la mejor idea para usar en el diseño. Al mismo tiempo, el bajo contraste de color también puede ser una mala idea; usar estos esquemas hace que sea difícil diferenciar entre elementos.
Si bien los diseños con bajo contraste tienen una estética propia, no siempre son la mejor opción para materiales de marketing o diseño de empaques.
Usar el contraste de color en productos físicos se trata de encontrar un equilibrio entre los altos y bajos. En el diseño básico, no hay una fórmula para un buen contraste; se necesita un buen ojo y mucha práctica.
¿Quieres aprender más sobre Software de dibujo? Explora los productos de Dibujo.
Contraste de color por el bien de la accesibilidad
El contraste de color es más que solo una estética; también es una necesidad, especialmente en la web. Lo más importante a recordar aquí es que si estás construyendo un sitio web, redactando una presentación o diseñando una infografía, es crucial que la información proporcionada sea accesible para todos los involucrados.
Una de las mejores maneras de hacer esto es asegurarse de que los colores que estás usando en tu diseño, gráfico o web, tengan un alto contraste.
Contraste en la web
WCAG (Guía de Accesibilidad de Contenido Web) 2.0 proporciona directrices específicas para asegurar que el contraste de color entre el primer plano (texto, imágenes, etc.) y el fondo sea apropiado usando una proporción. Esta proporción también varía según el tamaño y el peso del texto que se está utilizando.
WCAG 2.0 expresa que el contraste es una medida de la diferencia en el brillo percibido entre dos colores. Esta diferencia se indica con una proporción entre 1:1 (el contraste más bajo posible; texto blanco sobre fondo blanco) y 21:1 (el contraste más alto posible; texto negro sobre fondo blanco o viceversa).
El mínimo de contraste listado por WCAG es una proporción de 4.5:1 con la excepción de texto grande, logotipos o bajo contraste intencional en la web. Los valores hexadecimales de los colores en uso son necesarios para medir el contraste.
| DEFINICIÓN: Un código hexadecimal de color (código hex) detalla la composición de un color específico en un espacio de color RGB. Está compuesto por seis caracteres, tanto numéricos como alfabéticos. El primer par de valores se refiere al rojo, el segundo al verde y el tercero al azul, en valores hexadecimales 0-FF (#RRGGBB). |
Todo esto es un poco confuso. Pongámoslo en práctica.
Si bien parte del texto anterior puede ser legible para ti, puede ser difícil o imposible de leer para otros con discapacidades visuales. Incluso la última opción con una proporción de 4.57:1 es difícil de mirar. Recuerda que 4.5:1 es el mínimo.
Incluir un contraste apropiado es solo uno de los muchos elementos de diseño web necesarios para un gran sitio web. ¿No estás seguro de si lo estás haciendo lo suficientemente bien? El software de verificación de contraste de color puede ayudarte a asegurarte de que la paleta de colores que estás usando esté optimizada para la mejor experiencia de usuario posible.
¿Puedes leerme ahora?
¡No! Mira eso, un ejemplo perfecto de cómo el encabezado de esta conclusión es 1. feo y 2. imposible de leer.
Puedes leer estudios sobre contraste de color, daltonismo y accesibilidad, pero no hay nada como experimentar esta frustración de primera mano. No es agradable, así que haz tu deber para asegurarte de que tus usuarios y espectadores no lo experimenten tampoco.
El contraste aparece de manera diferente, dependiendo de si tu proyecto es impreso o digital. Aprende más sobre la diferencia entre RGB vs CMYK.
Daniella Alscher
Daniella Alscher is a Brand Designer for G2. When she's not reading or writing, she's spending time with her dog, watching a true crime documentary on Netflix, or trying to learn something completely new. (she/her/hers)
