---
title: "Contrastes et couleurs : ratios exigés, pièges fréquents et vérification"
description: "Vous êtes dans la rubrique consacrée à l’accessibilité numérique. Les ratios à atteindre Contraste minimal requis selon le type d’élément (niveau AA, sauf mention contraire). Type d’élément Ratio à respecter Texte de taille normale 4,5:1 Grand texte (24 px et plus, ou 18,5 px et plus en gras) 3:1 Éléments graphiques qui véhiculent une information […]"
url: "https://www.newp.fr/accessibilite-numerique/contrastes-et-couleurs/"
author: ""
date: "2026-09-20T09:27:36+00:00"
modified: "2026-09-21T18:31:44+00:00"
lang: "fr_FR"
---

# Contrastes et couleurs : ratios exigés, pièges fréquents et vérification

 Vous êtes dans la rubrique [consacrée à l’accessibilité numérique](/accessibilite-numerique/).

 

## Les ratios à atteindre

 Contraste minimal requis selon le type d’élément (niveau AA, sauf mention contraire).
| Type d’élément | Ratio à respecter |
|---|---|
| Texte de taille normale | 4,5:1 |
| Grand texte (24 px et plus, ou 18,5 px et plus en gras) | 3:1 |
| Éléments graphiques qui véhiculent une information et composants d’interface | 3:1 |
| Texte de taille normale, au niveau AAA | 7:1 |

 

 Ce ratio découle d’un calcul fondé sur la luminance relative de chaque couleur. Votre œil ne mesure rien : deux gris qui semblent bien distincts peuvent ne donner que 3,8:1.

## Ce que les équipes oublient de contrôler

- **Les textes secondaires** (dates de publication, informations annexes, aides à la saisie) affichés dans un gris très pâle. C’est le défaut le plus courant.
- **Les différents états d’un élément.** On valide l’affichage par défaut, puis on néglige le survol, la prise de focus, l’état inactif ou le message d’erreur.
- **Le texte incrusté sur une photo.** Le contraste varie en chaque point de l’image. Prévoyez un aplat opaque, un filtre sombre ou un liseré.
- **Le contour des champs de saisie**, fréquemment trop discret : il s’agit d’un composant d’interface, soumis au 3:1.
- **Les pictogrammes qui transmettent une information**, qui doivent eux aussi atteindre 3:1.
- **La version sombre du site**, déclinée à partir de la version claire sans refaire les calculs.
 
 Automatiser le contrôle des ratios Une charte graphique perd du contraste progressivement, retouche après retouche. Pour ne rien laisser passer, nous recommandons de recalculer les ratios lors de chaque publication et de bloquer la mise en production dès qu’un seuil n’est plus tenu.

 Nous appliquons ce principe à ce site : 20 paires de couleurs, en thème clair comme en thème sombre, sont vérifiées avant chaque déploiement. La méthode est détaillée dans notre [déclaration d’accessibilité du site](/accessibilite/).

 

## Deuxième exigence : la couleur ne suffit jamais à elle seule

 Un contraste suffisant ne règle pas tout. Aucune information ne doit reposer uniquement sur une différence de couleur. Cas typiques :

- des champs obligatoires repérables seulement parce qu’ils sont en rouge ;
- des liens au fil du texte que seule leur teinte distingue, ce qui justifie de les souligner ;
- trois pastilles verte, orange et rouge pour indiquer un statut, sans aucun mot associé ;
- un graphique dont les séries ne se reconnaissent qu’à leur couleur ;
- un onglet sélectionné signalé par un simple changement de nuance.
 
 Cette exigence protège les personnes atteintes de daltonisme, mais aussi les impressions en noir et blanc, la lecture en plein soleil et les modes de contraste renforcé.

## Une vérification en trente secondes

 Faites une capture d’écran de la page et convertissez-la en noir et blanc. Si deux éléments deviennent impossibles à différencier, c’est que l’information dépendait uniquement de leur couleur.

  [ Rubrique précédente Le facile à lire et à comprendre ](/accessibilite-numerique/falc/) [ Rubrique suivante Naviguer au clavier ](/accessibilite-numerique/navigation-au-clavier/)

---

*Source : [www.newp.fr](https://www.newp.fr/accessibilite-numerique/contrastes-et-couleurs/)*