Fallo Común F24 de WCAG 2.1: Especificar colores de primer plano sin especificar colores de fondo o viceversa

Jano Llorca Lis

El contraste entre el color del texto (primer plano) y el color de fondo es un aspecto esencial de la accesibilidad web. Muchas personas con discapacidad visual, dificultades cognitivas o sensibilidad al color necesitan configuraciones personalizadas para poder leer cómodamente. Si un sitio web define solo el color de primer plano o el color de fondo sin especificar ambos, puede generar problemas de contraste y legibilidad, incumpliendo los criterios 1.4.3 – Contraste (Mínimo), 1.4.6 – Contraste (Mejorado) y 1.4.8 – Presentación Visual de las WCAG 2.1.

Acerca de este fallo

Este fallo ocurre cuando un sitio web:

Define el color de fondo sin definir el color del texto.
Define el color del texto sin definir el color de fondo.
No garantiza un contraste adecuado entre ambos.

Estos problemas afectan principalmente a:

Usuarios con baja visión, que dependen de un contraste adecuado para leer el contenido.
Usuarios con daltonismo, que pueden tener dificultades para distinguir ciertos colores.
Usuarios con configuraciones personalizadas en su navegador, quienes podrían ver un contraste deficiente si no se especifican ambos colores.

Ejemplos

Ejemplo incorrecto 1: Especificar solo el color de fondo

Código incorrecto:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Incorrecto</title>
  <style>
    body { background-color: white; }
  </style>
</head>
<body>
  <p>Mi fondo es blanco.</p>
</body>
</html>

🔴 Problema: Se especifica sólo el color de fondo (blanco). No se especifica el color del texto, lo que puede resultar en un texto blanco sobre un fondo blanco si el usuario tiene configuraciones personalizadas.

Solución correcta

Código corregido:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Correcto</title>
  <style>
    body { background-color: white; color: black; }
  </style>
</head>
<body>
  <p>Mi fondo es blanco y el texto es negro.</p>
</body>
</html>

✅ ¿Qué mejora?:

Se especifica tanto el color de fondo como el del texto.
Se asegura un contraste adecuado.

Ejemplo incorrecto 2: Especificar solo el color del texto

Código incorrecto:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Incorrecto</title>
  <style>
    body { color: white; }
  </style>
</head>
<body>
  <p>Mi texto es blanco.</p>
</body>
</html>

🔴 Problema: Si el usuario tiene un fondo blanco en su configuración, el texto se volverá invisible.

Solución correcta

Código corregido:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Correcto</title>
  <style>
    body { background-color: black; color: white; }
  </style>
</head>
<body>
  <p>Mi texto es blanco y mi fondo negro.</p>
</body>
</html>

✅ ¿Qué mejora?:

Se define un fondo oscuro para asegurar la visibilidad del texto blanco.
Se mejora la accesibilidad para usuarios con baja visión.

Ejemplo incorrecto 3: Enlaces con colores de primer plano sin fondo

Código incorrecto:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Incorrecto</title>
  <style>
    a { color: red; }
  </style>
</head>
<body>
  <p>Visita nuestro <a href="https://ejemplo.com">sitio web</a>.</p>
</body>
</html>

🔴 Problema: Si el usuario tiene un fondo rojo configurado en su navegador, los enlaces pueden volverse invisibles.

Solución correcta

Código corregido:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Correcto</title>
  <style>
    a { color: red; background-color: white; }
  </style>
</head>
<body>
  <p>Visita nuestro <a href="https://ejemplo.com">sitio web</a>.</p>
</body>
</html>

✅ ¿Qué mejora?:

Se define un color de fondo para evitar problemas de contraste.
Se asegura que los enlaces sean siempre visibles.

Errores comunes y cómo evitarlos

Errores frecuentes:

No definir uno, otro o ambos colores (texto y fondo).
Usar combinaciones de colores con bajo contraste.
No considerar la herencia de estilos en CSS.

Cómo evitar estos errores:

Siempre definir tanto el color de primer plano como el de fondo.
Usar herramientas como Contrast Checker para garantizar el cumplimiento de WCAG.
Probar el sitio con diferentes configuraciones de usuario y estilos personalizados.

Preguntas frecuentes

¿Por qué es importante definir ambos colores?

Para garantizar que el texto sea visible sin depender de las configuraciones del usuario.

¿Cómo saber si mi sitio tiene un buen contraste?

Usando herramientas como WAVE, Axe o Contrast Checker.

¿Puedo usar imágenes de fondo en lugar de colores sólidos?

Sí, pero debe especificarse un color de respaldo en caso de que las imágenes no se carguen.

¿El criterio 1.4.8 aplica a todos los sitios web?

No, es específico para contenido avanzado y textos largos.

¿Cómo probar si mi sitio tiene este fallo?

Desactivando los estilos CSS en el navegador y verificando si el texto sigue siendo legible.

¿Qué combinación de colores es la más accesible?

Texto negro sobre fondo blanco o texto blanco sobre fondo negro con suficiente contraste.

Recursos relacionados

Pruebas y validación

Procedimiento

Inspeccionar el código del sitio web para verificar si se ha definido el color de primer plano sin especificar el de fondo o viceversa.
Utilizar herramientas de accesibilidad como el Contrast Checker de WebAIM o el modo de alto contraste del navegador para evaluar la legibilidad del texto.
Desactivar los estilos CSS del sitio web y comprobar si el contenido sigue siendo legible.
Probar con diferentes configuraciones de usuario, como esquemas de colores personalizados o navegadores con soporte para alto contraste.
Evaluar el sitio con lectores de pantalla para asegurarse de que la visibilidad del contenido no se vea comprometida.

Resultados esperados

✅ Si se definen tanto el color del texto como el color de fondo y cumplen con los estándares de contraste de WCAG, el sitio pasa la prueba.
❌ Si solo se define uno de los colores, o si la combinación resulta en un contraste insuficiente, hay un fallo de conformidad.

Garantizar un buen contraste entre el texto y el fondo es clave para la accesibilidad. Asegúrate de definir ambos colores y verificar el contraste de tu sitio. ¿Necesitas mejorar la accesibilidad de tu web? Contáctanos para asesoría experta.

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.