Vérificateur de Contraste WCAG
Vérifiez le ratio de contraste entre couleurs de texte et de fond selon WCAG 2.x. Voyez instantanément si le texte normal et le texte large respectent AA ou AAA.
Colores a comparar
Relación de contraste
Cumplimiento (WCAG 2.2)
Ejemplo de texto grande
Texto normal de cuerpo con 92% de brillo.
Comment utiliser : Contraste
- 1Saisissez la couleur du texte et celle du fond.
- 2Indiquez si le texte est normal ou grand.
- 3Consultez le ratio de contraste et sa conformité WCAG AA et AAA.
À quoi ça sert ?
- Garantir que les textes de votre site sont lisibles par tous.
- Vérifier boutons et liens avant de publier une maquette.
- Respecter les exigences d'accessibilité (RGAA) des projets publics.
Contraste des couleurs et accessibilité (WCAG)
Ce que mesure le ratio
Le ratio compare la luminance relative du texte et du fond, de 1:1 à 21:1 (noir sur blanc). La formule WCAG pondère rouge, vert et bleu selon la sensibilité de l'œil.
Niveaux AA et AAA
Pour AA, le texte normal exige au moins 4,5:1 et le grand texte (24 px ou 18,66 px en gras) 3:1. AAA demande 7:1 et 4,5:1. Les composants d'interface comme les bordures de champs exigent 3:1.
Pourquoi c'est important
Un contraste insuffisant gêne les personnes malvoyantes ou daltoniennes, mais aussi quiconque utilise son téléphone en plein soleil. En Europe, l'accessibilité est une obligation légale pour de nombreux services (EN 301 549). Ne comptez jamais sur la couleur seule pour transmettre une information.
Outils associés
Articles associés
Questions fréquentes
Quel ratio faut-il pour respecter WCAG ?+
Le texte normal nécessite 4,5:1 (AA) et 7:1 (AAA). Le texte large (≥18pt ou ≥14pt gras) nécessite 3:1 (AA) et 4,5:1 (AAA).