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.
Preguntas frecuentes
¿Qué es texto grande en WCAG?
Texto de al menos 24 px (18 pt) o de 18,66 px (14 pt) en negrita. Para ese texto se exige un ratio de 3:1 en nivel AA, frente a los 4,5:1 del texto normal.
¿El contraste se aplica a los logotipos y al texto decorativo?
No: los logotipos y el texto puramente decorativo o inactivo quedan exentos. Sí se aplica a texto de botones, enlaces, etiquetas de formulario y mensajes de error.
¿Cómo se calcula el contraste con un fondo semitransparente?
Hay que calcular primero el color resultante tras mezclar el color con el fondo real que hay detrás y comparar ese color final. Si el fondo es una imagen, comprueba las zonas más claras y más oscuras del texto.
¿Cumplir el ratio basta para ser accesible?
Es solo una parte. También hay que cuidar el tamaño del texto, no transmitir información solo con color, indicar el foco del teclado de forma visible y probar en modo oscuro, donde el contraste puede cambiar.