====== 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 [[notices:graphique-ergonomique:assurer-un-contraste-suffisant-entre-les-contenus-et-l-arriere-plan-ou-proposer-une-alternative-contrastee|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. 

<note astuce>**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

<code css>
background: black url(../images/dark-background.png) repeat-x;
</code>

This replacement colour can be inherited from a parent element. 
</note>

<note attention>**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.
</note>


===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:garantir-la-lisibilite-des-contenus-jusqu-a-200-de-grossissement]]
  * Next recommendation: [[notices:html-css:garantir-la-comprehension-de-l-information-meme-lorsque-css-est-desactive]]
</note>