Aller au contenu principal

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).

0.00/ 21

Ratio de contraste WCAG.Faible - À éviter pour du contenu textuel.

Éditeur

Texte Normal

Paragraphes, corps de texte

AAINVALIDE
AAAINVALIDE

Grand Texte

Titres 18pt+, Gras 14pt+

AAINVALIDE
AAAINVALIDE

Composants

Boutons, Inputs, Cartes

AAINVALIDE

Suggestions de couleurs

Calculé sur AA (4.5:1)
Couleur modifiée
Nouveau Ratio
Action
BG
#ffffffModifier le fond
5.17
TXT
#2362ebModifier le texte
5.23
TXT
#2865ebModifier le texte
5.06
BG
#fcfcfcModifier le fond
5.04
TXT
#1f5feaModifier le texte
5.41
TXT
#2d69ecModifier le texte
4.83

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.

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 (plus de 18pt ou 14pt gras). C'est le minimum légal pour le RGAA.
  • 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.