Cómo comprobar el contraste de colores para la accesibilidad
Alrededor de 1 hombre de cada 12 y 1 mujer de cada 200 tienen alguna forma de deficiencia de visión de color. Millones más tienen visión baja, una vista que envejece o consultan su pantalla a pleno sol. Si tu texto no tiene suficiente contraste con su fondo, esas personas no pueden leerlo.
El contraste de color no es un «extra» — es un requisito central de accesibilidad.
Lo que exige WCAG
Las Web Content Accessibility Guidelines (WCAG) definen las relaciones de contraste mínimas entre texto y fondo:
| Nivel | Texto normal | Texto grande | Elementos no textuales |
|---|---|---|---|
| AA (mínimo) | 4,5 : 1 | 3 : 1 | 3 : 1 |
| AAA (reforzado) | 7 : 1 | 4,5 : 1 | — |
«Texto grande» significa 18 px en negrita o 24 px regular y superior.
La relación de contraste va de 1 : 1 (ningún contraste — blanco sobre blanco) a 21 : 1 (contraste máximo — negro sobre blanco).
Cómo comprobar el contraste
- Selecciona tus colores — introduce el color del texto (primer plano) y el del fondo mediante códigos HEX, valores RGB o selectores.
- Consulta los resultados — la herramienta muestra al instante la relación de contraste y si tu combinación pasa WCAG AA y AAA en texto normal y grande.
- Ajusta si hace falta — si el contraste falla, oscurece el texto o aclara el fondo (o al revés) hasta alcanzar el nivel requerido.
Errores de contraste habituales
Texto gris claro sobre blanco — #999999 sobre #ffffff tiene una relación de solo 2,8 : 1. Falla WCAG AA. Puede parecer «elegante» a un diseñador con vista perfecta, pero es ilegible para muchos.
Texto coloreado sobre fondo coloreado — un botón azul con texto blanco pasa a menudo, pero un botón verde con texto blanco no. Comprueba siempre — no se puede juzgar una relación de contraste a ojo.
Texto de indicación — los textos de indicación en campos son notoriamente débiles en contraste. Aunque WCAG no los impone estrictamente, los usuarios deben poder leerlos igualmente.
Modo oscuro — los diseñadores usan a menudo gris medio sobre gris oscuro para un aspecto «sutil». Eso falla con frecuencia las comprobaciones de contraste.
Consejos
- Comprueba cada combinación texto/fondo — no presupongas nada. Incluso diseñadores experimentados se sorprenden de las combinaciones que fallan.
- Prueba ambos temas — si tu sitio tiene modo claro y modo oscuro, comprueba el contraste en los dos. Un color que funciona sobre blanco puede fallar sobre gris oscuro.
- Usa tus colores de marca con criterio — si tu azul de marca falla como color de texto, úsalo para elementos más grandes (botones, encabezados) donde se aplica el umbral de «texto grande» (3 : 1), y usa un matiz más oscuro para el cuerpo de texto.
- No te apoyes solo en el color — además de un contraste suficiente, nunca transmitas información únicamente por el color. Usa iconos, etiquetas o patrones como complemento.
Preguntas frecuentes
¿A qué relación de contraste apuntar?
Para texto normal, apunta al menos a 4,5 : 1 (WCAG AA). Para texto grande (18 px negrita o 24 px regular), 3 : 1 basta. Para el nivel de accesibilidad más alto (AAA), apunta a 7 : 1 para texto normal.
¿Esto solo se aplica al texto?
No. WCAG 2.1 también exige un contraste suficiente para los componentes de interfaz y los objetos gráficos (iconos, bordes de campos, indicadores de foco). El mínimo para los elementos no textuales es 3 : 1.
¿Y en modo oscuro?
El modo oscuro requiere las mismas comprobaciones de contraste. Texto blanco sobre fondo oscuro suele pasar fácilmente, pero texto gris sobre fondo gris oscuro suele fallar. Prueba ambos modos.
¿El contraste de color es un requisito legal?
En muchas jurisdicciones, sí. La ADA (EE. UU.), EN 301 549 (UE) y leyes similares imponen la accesibilidad digital. La conformidad WCAG es el estándar reconocido para cumplirlos.