Outil gratuit

Calculateur de contraste RGAA

Vérifiez la lisibilité de votre texte et assurez-vous qu'il respecte les normes d'accessibilité (RGAA 4.1 et WCAG 2.2).

En Bref

  • RGAA 3.2 (WCAG 1.4.3) : ratio minimum de 4,5:1 pour le texte normal, 3:1 pour le grand texte (24 px ou plus, 18,5 px ou plus en gras).
  • RGAA 3.3 (WCAG 1.4.11) : les composants d'interface et graphiques porteurs d'information (icônes, bordures de champ actives) exigent aussi 3:1.
  • Le niveau AAA (7:1 pour le texte normal) renforce la lisibilité mais n'est pas exigé par le RGAA.
  • Le contraste est un critère mesurable, pas une appréciation visuelle : un ratio conforme ne suffit pas à rendre un site conforme au RGAA.
0.00/ 21

Ratio de contraste WCAG.Insuffisant : sous le seuil RGAA, à éviter pour du texte.

Éditeur

Conformité RGAA

Texte Normal

RGAA 3.2

Paragraphes, corps de texte, liens

Non conforme· ≥ 4,5:1AAA 7:1 · non atteint

Grand Texte

RGAA 3.2

Texte ≥ 24px, ou gras ≥ 18,5px

Non conforme· ≥ 3:1AAA 4,5:1 · non atteint

Composants et éléments graphiques

RGAA 3.3

Bordures de champ, icônes et pictogrammes porteurs d’information

Non conforme· ≥ 3:1

Ce verdict porte sur le contraste de cette paire de couleurs, pas sur la conformité RGAA de la page : celle-ci suppose de vérifier tous les textes et exclut certains cas (logos, textes décoratifs, éléments désactivés).

AAA = niveau WCAG renforcé (7:1 pour le texte normal, 4,5:1 pour le grand texte), au-delà des exigences RGAA. Indicatif, non requis pour la conformité.

Bien choisir le critère. Le contraste d’un texte (y compris un lien) relève du critère RGAA 3.2 : seuil 4,5:1, ou 3:1 pour le grand texte. Le seuil 3:1 des composants (RGAA 3.3) ne concerne que les éléments non textuels porteurs d’information (bordures de champ, icônes, pictogrammes). Un lien texte trop pâle est donc une non-conformité 3.2, pas 3.3.

Suggestions de couleurs

Calculé sur AA (4,5:1)
Couleur modifiée
Nouveau ratio
Action
#1f5bffModifier le texte
5.25
#ffffffModifier le fond
5.25
#245effModifier le texte
5.10
#1a57ffModifier le texte
5.45
#fcfcfcModifier le fond
5.12
#2962ffModifier le texte
4.90

Prévisualisation réelle

Rendu simulé

Titre Principal

Ceci est un exemple de paragraphe standard. Le contraste doit être suffisant pour une lecture fluide et sans fatigue.

Information importante ou métadonnée.

Petit Texte (14px)

L’accessibilité pour tous.

Titre Large (24px)

Accessibilité Web

Comprendre le ratio de contraste

Le contraste des couleurs est l'un des piliers de l'accessibilité web. Il garantit que votre contenu reste lisible pour tous, y compris les personnes malvoyantes, daltoniennes, ou simplement celles qui consultent votre site en plein soleil. En France, il fait partie des critères RGAA vérifiés lors d'un audit.

Les niveaux WCAG expliqués :

  • Niveau AA (Standard) : Ratio minimum de 4,5:1 pour le texte normal et 3:1 pour le grand texte (à partir de 24 px, ou 18,5 px en gras). C'est le minimum requis par le RGAA. Sur le lien entre seuils et taille de police, consultez notre guide dédié.
  • Niveau AAA (Amélioré) : Ratio de 7:1 pour le texte normal. Idéal pour maximiser la lisibilité.

Pourquoi utiliser ce calculateur ?

Notre outil ne se contente pas de vous donner un "Pass" ou "Fail". Il vous aide à :

  • Ajuster vos couleurs : Trouvez la teinte la plus proche qui respecte le ratio.
  • Simuler la vision : Vérifiez comment vos couleurs sont perçues par les daltoniens.
  • Valider votre Design System : Assurez-vous que votre palette de marque est inclusive dès la conception.

En respectant ces ratios, vous améliorez non seulement l'accessibilité, mais aussi l'expérience utilisateur globale (UX) et le référencement (SEO) de votre site.

Questions fréquentes

Allez plus loin dans l'accessibilité

Cet outil cible le contraste des couleurs, un aspect parmi d'autres de l'accessibilité. Lancez un audit complet gratuit pour analyser les 106 critères du RGAA.

Scanner mon site gratuitement

Outils complémentaires

Continuez votre démarche d'accessibilité avec ces outils gratuits, dans la même thématique.