Color
Contraste
Si no se lee, no existe.
El contraste en diseño es la diferencia entre el texto y lo que tiene detrás. Si es poca, tu mensaje se pierde aunque el diseño se vea bonito.
3 demos interactivas
Guía gratis por DM
Color
Mira el reel · 1 min
01
Qué es
El contraste en diseño es la diferencia entre el texto y su fondo: de brillo, de tamaño y de peso. A más diferencia, más rápido entiende el ojo. A menos, más se pierde tu mensaje.
No es un tema de gusto. Un texto gris claro sobre blanco puede verse elegante en tu pantalla y ser ilegible en el celular de alguien, con el brillo bajo y a pleno sol.
02
Pruébalo
Mueve el slider y mira cómo el texto pasa de perderse a leerse. Cambia el fondo: la regla es la misma.
NO EXISTE.
Lanzamiento de la nueva colección. 15 de octubre, solo online. Así se ve un párrafo con este color.
La regla de oro
Brillo opuesto: texto claro sobre fondo oscuro, texto oscuro sobre fondo claro.
03
Así no / así sí
Lanzamiento de la nueva colección
15 de octubre · solo online
NUEVA
COLECCIÓN
15 de octubre · solo online
Se pierde.
Pequeño, delgado y casi del color del fondo. Nadie se detiene a descifrarlo.
Se lee.
Más tamaño, negrilla y un color que resalta. Se entiende en un segundo.
04
Combinaciones que sí y que no
El número es el ratio de contraste. Fíjate en el blanco sobre amarillo: se ve bonito, pero casi nadie lo lee.
Texto normal4.5:1
Titulares grandes3:1
05
Cómo aplicarlo hoy
1
Sube el tamaño
Tu titular debe medir por lo menos el doble que el texto. Si dudas, más grande.
2
Usa el peso
Negrilla para lo importante, regular para lo demás. Si todo va en negrilla, nada resalta.
3
Brillo opuesto
Antes de elegir el color, decide si el fondo es claro u oscuro. El texto va al lado contrario.
4
Mide, no adivines
Pega tus colores en un verificador de contraste (busca "WCAG contrast checker") y apunta a 4.5:1.
06
Antes de publicar
- ¿Se lee en el celular, con el brillo bajo?
- ¿El titular se entiende en un segundo?
- ¿El texto y el fondo tienen brillo opuesto?
- ¿El texto pequeño llega a 4.5:1?
COMENTA
“GUÍA”
y te envío
la guía
por DM
La guía de contraste en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Qué es el contraste en diseño gráfico?
Es la diferencia visual entre dos elementos, sobre todo entre el texto y su fondo. Se logra con brillo, tamaño, peso y color, y define qué tan rápido se lee algo.
¿Cuál es el contraste mínimo recomendado para texto?
Las pautas de accesibilidad WCAG piden un ratio de 4.5:1 para texto normal y 3:1 para texto grande (unos 24 px, o 19 px en negrilla). El ratio va de 1:1, sin contraste, a 21:1, negro sobre blanco.
¿Cómo sé si mis colores tienen buen contraste?
Usa un verificador de contraste WCAG: pegas el color del texto y el del fondo y te da el ratio. Si no llegas a 4.5:1, aclara u oscurece uno de los dos.
Sigue aprendiendo
