====== 3.1.1. Make sure that there is sufficient contrast between the content and the background or propose an alternative with contrast ======

The contrast between the colours and the background must be sufficient for all items present (text, images, videos, etc.).

To test the contrast, you could use, for example, the Contrast Analyser tool for Windows and Mac OS, which you can download free at //[[ressources:mode-d-emploi-du-logiciel-contrast-analyser|Contrast Analyser]]//, disponible en libre téléchargement pour Windows et Mac OS.

{{:notices:graphique-ergonomique:3.1.1-a-en.jpg?direct&650|}}
According to this tool, the contrast ratio is considered as sufficient if it reaches the standard AA.

<note attention>**Warning**\\
Be careful when using shading or patterns as background for content.</note>

<note>**Note**\\
If it is not practical to optimize the contrast, then you can create alternative style guidelines that offer sufficient contrast. 

Alternative style guidelines do not necessarily push the contrast to the limits (for example, //black on white//, or //white on black//), but provide rules so that the association of colours is optimized satisfactorily. 
</note>

===== Examples =====

{{:notices:graphique-ergonomique:3.1.1-b-en.jpg?direct&400 |}}{{:notices:graphique-ergonomique:3.1.1-c-en.jpg?direct&400|}}\\
//in this example, alternative style guidelines that are sufficiently contrasted
can be activated from the button “Change the page contrast”.//
===== Some useful tools =====

  * [[ressources:mode-d-emploi-du-logiciel-contrast-analyser|Contrast Analyser (and its manual)]].
  * [[http://www.dasplankton.de/ContrastA/|Contrast-A]].

===== Recommendations associées =====

<note bulle>
  * Previous recommendation: [[notices:graphique-ergonomique:associer-un-texte-a-chaque-symbole-ambigu]]
  * Next recommendation: [[notices:graphique-ergonomique:assurer-la-comprehension-de-l-information-meme-en-l-absence-de-couleurs]]
</note>