F24Color del texto definido sin color de fondo, o al revés

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.

Ejemplos

<!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>

<!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>

<!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

Técnicas relacionadas

• C23: Especificar los colores del texto y del fondo del contenido secundario, como barras de navegación, menús o tabla de contenidos, y dejar sin especificar los colores del contenido principal
• C25: Especificar bordes y maquetación en CSS para delimitar las áreas de una página web sin especificar los colores del texto ni del fondo del texto

Recursos

• CSS Cascading and Inheritance Level 4