Un texto gris claro sobre blanco puede quedar "elegante" en el mockup de Figma con la pantalla del diseñador a máximo brillo, y ser ilegible para el resto del mundo con el móvil al sol. Las pautas WCAG (Web Content Accessibility Guidelines) existen precisamente para no dejar eso al ojo de cada uno.
Qué es el ratio de contraste
Es un número entre 1:1 (mismo color, sin contraste) y 21:1 (negro puro sobre blanco puro, el máximo posible). Se calcula a partir de la luminancia relativa de cada color — no es solo "restar el brillo", tiene en cuenta que el ojo humano percibe el verde con más intensidad que el azul, por eso la fórmula pondera cada canal de forma distinta antes de comparar.
Los mínimos que exige WCAG 2.1
| Nivel | Texto normal | Texto grande (≥18pt o ≥14pt negrita) |
|---|---|---|
| AA (mínimo legal en muchos países) | 4.5:1 | 3:1 |
| AAA (óptimo) | 7:1 | 4.5:1 |
"Texto normal" es prácticamente todo tu contenido: párrafos, labels de formulario, texto de botones pequeños. El umbral más bajo (3:1) solo aplica a titulares grandes y texto en negrita de tamaño generoso.
Los errores más comunes
- Placeholder gris claro en inputs — suele rondar 2.5:1, muy por debajo del mínimo.
- Texto de marca sobre fondo de marca — un azul corporativo sobre otro azul corporativo casi nunca llega a 4.5:1.
- Botones "ghost" con borde y texto del mismo color pastel — bonitos, ilegibles.
- Fiarse del contraste en un monitor de diseñador con panel P3 calibrado; el usuario real lo ve en una pantalla barata con brillo bajo.
Cómo arreglarlo sin repensar la paleta
No hace falta tirar la paleta de marca. Casi siempre basta con oscurecer o aclarar la luminosidad (el canal L de HSL) del color problemático manteniendo el matiz — nuestro mezclador de colores y el selector de color te dejan ajustar en HSL en tiempo real mientras compruebas el ratio resultante.
Comprueba cualquier combinación con el comprobador de contraste WCAG: pega el color de texto y el de fondo, y verás el ratio exacto y si pasa AA o AAA, tanto para texto normal como grande. Si necesitas variaciones de un color base que mantengan la identidad visual, el generador de paletas genera esquemas análogos, complementarios y monocromáticos ya pensados para tener buen rango de luminosidad.