Addaw, ir a inicio Donar

Fallo común Fallos comunes WCAG 2.2

F24Fallo de los criterios de conformidad 1.4.3, 1.4.6 y 1.4.8 debido a especificar colores de primer plano sin especificar colores de fondo, o viceversa

En resumen

Este fallo se produce cuando el CSS de una página define el color del texto pero no el del fondo, o al revés. Muchas personas con baja visión o con dificultades de lectura configuran en su navegador sus propias combinaciones de color; si el autor solo fija uno de los dos colores, el resultado puede ser texto gris sobre fondo gris o blanco sobre blanco. Defina siempre ambos colores juntos, incluidos los estados de los enlaces, y compruebe su contraste.

Aplicabilidad

Todas las tecnologías que permiten a los agentes de usuario controlar los colores de primer plano y de fondo mediante hojas de estilo personales u otros medios.

Descripción

Los usuarios con pérdida de visión o con dificultades cognitivas, del lenguaje o de aprendizaje suelen preferir combinaciones concretas de colores de primer plano y de fondo. En algunos casos, a las personas con baja visión les resulta mucho más fácil ver una página web con texto blanco sobre fondo negro, y pueden haber configurado su agente de usuario para que presente ese contraste. Muchos agentes de usuario permiten a los usuarios indicar una preferencia sobre los colores de primer plano o de fondo que desean ver sin anular todos los estilos especificados por el autor. Esto hace posible que los usuarios vean con su combinación de colores preferida las páginas en las que el autor no ha especificado colores.

Si el autor no especifica a la vez los colores de primer plano y de fondo, deja de poder garantizar que el usuario obtenga un contraste que cumpla los requisitos de contraste. Si, por ejemplo, el autor especifica que el texto debe ser gris, puede anular la configuración del agente de usuario y presentar una página con texto gris (especificado por el autor) sobre un fondo gris claro (establecido por el usuario en su agente de usuario). Este principio también funciona a la inversa. Si el autor fuerza que el fondo sea blanco, el fondo blanco especificado por el autor podría ser de un color parecido al color de texto que el usuario ha indicado como preferencia en la configuración de su agente de usuario, con lo que la página resultaría inutilizable para el usuario. Como el autor no puede predecir cómo ha configurado un usuario sus preferencias, si el autor especifica un color de texto de primer plano también debería especificar un color de fondo que tenga suficiente contraste con el primer plano, y viceversa.

No es necesario que los colores de primer plano y de fondo se definan ambos en el mismo elemento. El color del texto de primer plano se hereda de los elementos antecesores. Si no se ha definido el color de background de un elemento, el elemento tendrá un fondo transparente, por lo que los autores deben asegurarse de que al menos uno de los antecesores del elemento tenga definido un color de fondo.

Es práctica habitual incluir todos los estados del texto. Por ejemplo: texto, texto de enlace, texto de enlace visitado, texto de enlace al pasar el puntero y al recibir el foco del teclado, etc.

Ejemplos

Especificar solo el color de fondo con CSS

En el ejemplo siguiente, el color de fondo se define en la hoja de estilo CSS, pero no se define el color de primer plano. Por tanto, el ejemplo falla el criterio de conformidad.

<!doctype>
  <html lang="en">
  <head>
    <title>Setting the canvas background</title>
    <style>
      body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>

Especificar solo el color de primer plano con CSS

En el ejemplo siguiente, el color de primer plano se define en la hoja de estilo CSS, pero no se define el color de fondo. Por tanto, el ejemplo falla el criterio de conformidad.

<!doctype>
<html lang="en">
<head>
  <title>Setting the canvas foreground</title>
  <style>
    body {color:white}
  </style>
</head>
<body>
  <p>My foreground is white.</p>
</body>
</html>

Especificar el color de primer plano del texto de los enlaces con CSS

En el ejemplo siguiente, el color del texto de los enlaces (primer plano) se define en el elemento body. Sin embargo, no se define el color de fondo. Por tanto, el ejemplo falla el criterio de conformidad.

<!doctype>
<html lang="en">
<head>
  <title>A study of population dynamics</TITLE>
  <style>
    a:link { color: red }
    a:visited { color: maroon }
    a:active { color: fuchsia }
</style>
</head>
<body>
 <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>

Pruebas

Procedimiento

  1. Examinar el código de la página web.
  2. Comprobar si hay un color de primer plano especificado por el autor
  3. Comprobar si hay un color de fondo especificado por el autor

El color y el color de fondo pueden especificarse en cualquier nivel de la cascada de selectores precedentes, mediante hojas de estilo externas o a través de las reglas de herencia.

El color de fondo también puede especificarse con una imagen de fondo, mediante la propiedad CSS background-image o mediante la propiedad abreviada background de CSS (con el URI de la imagen, p. ej. background: url("images/bg.gif")). Con imágenes de fondo, los autores tendrán que comprobar el contraste del texto respecto a los distintos colores de la imagen de fondo que quedarán detrás del texto, y puede que también deban tener en cuenta el contraste cuando las imágenes no se muestren.

Resultados esperados

Si la comprobación n.º 2 es verdadera pero el paso n.º 3 es falso, o si la comprobación n.º 3 es verdadera pero el paso n.º 2 es falso, se da esta condición de fallo y el contenido falla estos criterios de conformidad.

Recursos

Cómo lo comprobamos en ADDAW

Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F24 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.

Financiado por la unión europea Gobierno de españa red.es Plan de recuperación transformación y resilencia kit digital