---
title: "À propos du contraste de couleurs de texte"
date: 2018-12-17T10:02:39.000Z
canonical: https://www.ekino.fr/publications/a-propos-du-contraste-de-couleurs-de-texte/
---

## Ce que disent les spécifications

Pour assurer la lisibilité, la couleur de texte doit être suffisamment contrastée par rapport à sa couleur de fond.

Cette limite est fixée par un ratio minimum à respecter entre les deux couleurs.

Pour plus de détails, voir :

- [À propos du ratio](http://www.w3.org/Translations/WCAG20-fr/#contrast-ratiodef)
- [Spécification WCAG 2.0 (W3C) – Section 1.4](http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast)
- [Référentiel AccessiWeb HTML5/ARIA – Section “Couleurs”](http://www.accessiweb.org/index.php/accessiweb-html5aria-liste-deployee.html#couleurs)
- [Règle Opquast](https://checklists.opquast.com/fr/assurance-qualite-web/les-contenus-sont-presentes-avec-un-contraste-suffisant-par-rapport-a-leur-arriere-plan)

## Comment respecter ce ratio ?

Ce ratio varie en fonction des référentiels et des niveaux visés.

Voici un tableau pour vous aider à voir, d'un coup d’œil, le ratio qui vous concerne.

<!-- omitted: legacy.html -->

## Pourquoi s’occuper de contraste de couleurs

La lisibilité est un critère important de l’expérience utilisateur. Elle contribue à rendre le site utilisable et agréable.

Chaque utilisateur peut être concerné par la question du contraste :

- un daltonien  (8% de la population mondiale masculine (et 0,5% de la population mondiale féminine)) ;
- une personne avec une mauvaise vue ;
- un "mobinaute" avec un faible contraste sur son écran du à l’ensoleillement  (32 millions de mobinautes en France) ;
- etc.

## Comment mesurer le contraste ?

Des outils permettent de connaître le ratio entre deux couleurs. Certains vous aident même à trouver une couleur approchante mais valide quand la vôtre ne respecte pas le ratio minimal.

Pour vérifier un contraste :

- [Colour Constrast Analyser](http://www.paciellogroup.com/resources/contrastAnalyser)
- ou [Contrast Ratio](http://leaverou.github.io/contrast-ratio/)

L'outil Colour Constrast Analyser – La validation est indiquée pour 4 niveaux de validité.

L'outil Contrast Ratio – La pastille vous indique le ratio entre deux couleurs.

Pour trouver une couleur :

- [Contrast-Finder](http://contrast-finder.tanaguru.com/form.html) aide à trouver un contraste dans la couleur choisie

L'outil Tanaguru Contrast-Finder – Proposition de couleurs alternatives pour respecter le ratio.

## Aller plus loin

Si cet article n'a pour but que de vous donner des réponses rapides à des questions pratiques, vous pourrez en apprendre plus dans l'article « [Contraste de textes](http://openweb.eu.org/articles/accessibilite_contrastes_textes_sites) », par Nicolas Hoffmann (sur OpenWeb).

## Infographie récapitulative

Téléchargez, imprimez, affichez et partager notre infographie récapitulative sur le contraste de couleurs de texte. Un outil pratique pour savoir en un coup d’œil quel contraste respecter.

![](https://www.ekino.fr/media/original/2020/10/6e69e78d-76b2-dfd6-168a-e867a3c1db6b.jpg)
*Infographie sur les contrastes de couleurs de texte, à imprimer et partager*

## Remerciements et réutilisation

Je remercie Damien Berseron et Romain Emonet.

Si vous utilisez cette infographie, distribuée sous licence [CC BY 3.0 FR](https://creativecommons.org/licenses/by/3.0/fr/) (2), nous en serions ravis ! Vous pouvez nous le faire savoir via notre compte Twitter par exemple : [@ekino\_France ](https://twitter.com/ekino_France)ou via les commentaires ci-dessous.

(2) Cela signifie que vous pouvez partager et adapter ce contenu, sous réserve que vous attribuiez la source à « Ekino – [http://www.ekino.f](http://www.ekino.com/)[r](http://www.ekino.com/)[/](http://www.ekino.com/) » et que vous indiquiez les modifications apportées.