10.3.1. Make sure content is readable when images are not displayed

When images are not displayed, the text content of the page must remain visible and readable. No information should be lost, and the contrast between the text colour and the background colour should be sufficiently high.

In other words, content should be readable:

  • Even when the images included in CSS are not loaded into the page.
  • Even when the images included in HTML are replaced by the content of the alt attribute.


Whenever text is superimposed on a background image, make sure that you include a replacement colour that ensures the text is readable even if the background image is missing

background: black url(../images/dark-background.png) repeat-x;

This replacement colour can be inherited from a parent element.


Special attention should be paid to the readability of the alternate text of images integrated in the HTML code, when the images are not displayed.

An earlier recommendation in this manual advised leaving out the height and width attributes in the HTML code, which ensures that the alternate text is displayed.

notices/html-css/garantir-la-lisibilite-des-contenus-lorsque-les-images-ne-sont-pas-affichees.txt · Last modified: 11 June 2013 at 14:25 by Sébastien Delorme (Atalan)

Project coordinated by Atalan.

In partnership with: