Error de conexión. Inténtalo de nuevo.

Saltar al contenido
SEO Tools
Ayuda y documentación
UX / UI Impacto alto Fácil 20 a 40 minutos

Contraste del texto contra el fondo.

El texto debe tener suficiente contraste (WCAG AA 4.5:1).

Qué es

El contraste es la diferencia de luminosidad entre el texto y el fondo. El texto gris claro sobre fondo blanco tiene poco contraste y es difícil de leer. WCAG AA requiere una proporción de al menos 4,5:1 para el cuerpo del texto.

Por qué importa

El bajo contraste excluye a los usuarios con visión más débil y empeora la legibilidad para todos, especialmente en dispositivos móviles a la luz del sol. Es una falla de accesibilidad común y Google lo informa en las auditorías.

Cómo hacerlo

  1. 1Verifique la relación de contraste (una herramienta de navegador o un verificador de contraste en línea).
  2. 2Para el cuerpo del texto, busque ≥ 4,5:1, para texto grande ≥ 3:1.
  3. 3Evite el texto gris claro (#ccc, #ddd) sobre un fondo blanco.
  4. 4No atenúes el texto con una opacidad demasiado baja.

Ejemplo

Incorrecto
.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — ilegible */
Correcto
.texto { color: #374151; background: #ffffff; } /* ~10:1 — Aceptar */

Conclusión

Un contraste suficiente es fundamental para la legibilidad y la accesibilidad. Nuestra heurística estática marca claramente los colores, pero verifica la proporción exacta en el navegador. El texto más oscuro sobre un fondo claro (y viceversa) es una opción segura.

Temas relacionados