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:

Tip

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.

Warning

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.