Qué es el contraste: tipos, ejemplos y cómo aplicarlo en diseño

El contraste es la diferencia perceptible entre dos elementos. En diseño, es lo que hace que algo destaque sobre lo demás y lo que permite que el ojo distinga unas partes de otras.

Es uno de los principios básicos del diseño y probablemente el que más impacto tiene: sin contraste, un diseño no se lee, no guía y no comunica jerarquía.

Por qué importa tanto

El ojo humano no examina una imagen de forma ordenada. Va primero a lo que más destaca. El contraste es la herramienta que decide qué es ese "lo que más destaca".

De ahí salen sus tres funciones:

• Legibilidad. Sin diferencia suficiente entre texto y fondo, simplemente no se lee.
• Jerarquía. Indica qué es importante y qué es secundario sin necesidad de explicarlo.
• Dirección de la mirada. Permite decidir por dónde empieza a mirar quien ve tu diseño.

Los siete tipos de contraste

1. De valor (claro y oscuro)

La diferencia de luminosidad. Es el más potente de todos y el más fiable, porque funciona incluso en blanco y negro.

Truco profesional: pon tu diseño en escala de grises. Si sigue entendiéndose, el contraste de valor está bien resuelto. Si todo se convierte en una masa gris uniforme, tienes un problema aunque a color parezca vistoso.

2. De color

Entre tonos distintos. Los colores opuestos en el círculo cromático (azul y naranja, rojo y verde, amarillo y violeta) generan el máximo contraste.

Cuidado con una trampa frecuente: dos colores muy distintos pero de luminosidad parecida —un rojo y un verde del mismo valor— apenas contrastan para el ojo, y para una persona con daltonismo son casi el mismo color.

3. De tamaño

Un elemento grande junto a uno pequeño. Es la forma más directa de establecer jerarquía. Un titular a 48 puntos sobre un texto a 16 deja claro qué se lee primero sin necesidad de nada más.

4. De forma

Formas geométricas frente a orgánicas, angulosas frente a redondeadas. Un círculo entre cuadrados atrae la mirada de inmediato.

5. De textura

Superficies lisas frente a rugosas, planas frente a con relieve. Aporta profundidad y sensación táctil.

6. De posición y espacio

Zonas densas frente a zonas vacías. El espacio en blanco alrededor de un elemento es una de las formas más elegantes de destacarlo: no hace falta ponerlo más grande ni más llamativo, basta con dejarlo respirar.

7. De tipografía

Combinar fuentes distintas, o pesos distintos de la misma familia. Una regla que funciona: si combinas dos tipografías, que sean claramente diferentes. Dos fuentes parecidas no parecen una decisión, parecen un error.

El contraste medible: accesibilidad

Aquí el contraste deja de ser cuestión de gusto y se convierte en un número.

La relación de contraste entre dos colores se expresa como una proporción, de 1:1 (idénticos) a 21:1 (negro puro sobre blanco puro). Las pautas internacionales de accesibilidad establecen mínimos:

Puedes comprobarlo con herramientas gratuitas como el Contrast Checker de WebAIM, o directamente con las herramientas de desarrollo del navegador, que muestran la relación al inspeccionar cualquier texto.

El caso que falla siempre: el texto gris claro sobre fondo blanco. Queda elegante en la pantalla del diseñador, con buena luz y vista joven. Al sol, en un móvil o con cincuenta años, desaparece. Es el error de accesibilidad más extendido en la web.

Y no es solo cuestión de discapacidad: un contraste flojo perjudica a todo el mundo en condiciones reales de uso.

Cómo usar el contraste en la práctica

Un solo foco por pantalla

Si todo destaca, no destaca nada. Decide cuál es el elemento importante —normalmente el botón de acción— y dale el mayor contraste. El resto, bajarlo.

Es el error más común en las páginas que no convierten: cinco botones del mismo color compitiendo entre sí. El ojo no sabe dónde ir y acaba no yendo a ninguno.

Regla de los tres niveles

Organiza tu texto en tres niveles de contraste:

• Alto: titulares y lo que quieres que se lea sí o sí.
• Medio: el texto de lectura.
• Bajo: notas, pies de foto, información secundaria.

Más de tres niveles confunde en vez de ordenar.

Nunca uses solo el color para transmitir información

"Los campos en rojo son obligatorios" deja fuera a quien no distingue el rojo. Añade siempre un segundo indicador: un icono, un asterisco, un texto.

Alrededor del 8% de los hombres tiene alguna forma de daltonismo. En un público de mil personas, son ochenta que no ven lo que tú diste por evidente.

Contrasta también lo que no es texto

Los bordes de los campos de formulario, los iconos y los separadores necesitan contraste suficiente. Un campo cuyo borde apenas se ve es un campo que la gente no encuentra.

Errores frecuentes

Texto sobre una foto sin protección. La foto tiene zonas claras y oscuras, así que el texto se leerá bien en unas partes y desaparecerá en otras. Solución: una capa semitransparente entre la imagen y el texto, o un degradado.

Confiar en la pantalla propia. Tu monitor calibrado y con brillo alto no representa el móvil de tu cliente a pleno sol. Comprueba siempre en un teléfono real.

Colores de marca inaccesibles. Muchos colores corporativos no alcanzan el mínimo de contraste. La solución no es abandonarlos, sino reservarlos para elementos grandes y usar una variante más oscura para el texto.

Modo oscuro sin revisar. Invertir los colores no basta: hay que volver a medir. Y el blanco puro sobre negro puro cansa la vista, así que suele preferirse un gris muy claro sobre un gris muy oscuro.

Preguntas frecuentes

¿Cuál es el contraste máximo posible?
21:1, entre negro puro y blanco puro. Rara vez se usa en textos largos porque resulta agresivo para la vista.

¿El contraste alto siempre es mejor?
Para textos funcionales, sí. Para lecturas largas, un contraste algo menor —gris muy oscuro sobre blanco roto— cansa menos.

¿Cómo mido el contraste de mi web?
Con las herramientas de desarrollo del navegador al inspeccionar un texto, o con comprobadores en línea introduciendo los dos colores.

¿El contraste es lo mismo que la saturación?
No. La saturación es la intensidad de un color; el contraste es la diferencia entre dos elementos. Dos colores muy saturados pueden contrastar muy poco entre sí.

---

¿Quieres aprender diseño con criterio? Mira nuestro catálogo de cursos de diseño gráfico: acceso inmediato, de por vida y con certificado.