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
altattribute.
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.
Related recommendations
- Previous recommendation: 10.2.3. Ensure the readability of content even if the text size is doubled
- Next recommendation: 10.3.2. Garantir la compréhension de l'information même lorsque CSS est désactivé
