Comment utiliser : Vérificateur de contraste
- Saisissez la couleur du texte et la couleur de fond (HEX, rgb(), hsl(), oklch() ou un nom CSS), ou utilisez les sélecteurs de couleur.
- Lisez le ratio de contraste et les résultats AA/AAA pour le texte normal, le grand texte et les composants d'interface.
- Vérifiez l'aperçu en direct : titres, texte courant, petits caractères, un bouton et la bordure d'un champ.
- Si un niveau échoue, cliquez sur Utiliser à côté de la couleur conforme la plus proche pour l'appliquer, puis copiez le nouveau HEX dans votre CSS.
Qu'est-ce qu'un ratio de contraste des couleurs ?
Le ratio de contraste compare la luminance relative de deux couleurs sur une échelle allant de 1:1 (couleurs identiques) à 21:1 (noir sur blanc). Les Web Content Accessibility Guidelines (WCAG) s'en servent pour déterminer si un texte est lisible pour les personnes malvoyantes ou daltoniennes, et pour quiconque lit un téléphone en plein soleil. C'est aussi un repère juridique : des textes comme l'Acte européen sur l'accessibilité et l'ADA sont généralement évalués selon le niveau AA des WCAG 2.x.
Exigences de contraste des WCAG 2.2
| Critère | Niveau | Texte normal | Grand texte |
|---|---|---|---|
| 1.4.3 Contraste (minimum) | AA | 4.5:1 | 3:1 |
| 1.4.6 Contraste (renforcé) | AAA | 7:1 | 4.5:1 |
| 1.4.11 Contraste des éléments non textuels | AA | 3:1 pour les bordures des composants d'interface, les indicateurs de focus et les icônes ou graphiques porteurs de sens | |
Grand texte désigne un texte d'au moins 18 pt (24 px) en régulier ou 14 pt (≈18,66 px) en gras. Les logos, le texte purement décoratif et le texte des contrôles désactivés sont exemptés.
Calcul du ratio
Chaque canal sRGB est linéarisé (les valeurs ≤ 0,04045 sont divisées par 12,92, les autres utilisent ((c + 0,055) / 1,055)2,4), puis combiné en luminance relative : L = 0.2126 R + 0.7152 G + 0.0722 B. Le ratio vaut (Lplus clair + 0,05) / (Lplus foncé + 0,05). Les seuils sont stricts : #777777 sur blanc donne 4,47:1 et échoue au niveau AA, alors que #767676 atteint 4,54:1 et réussit. C'est pourquoi ce vérificateur tronque le ratio affiché au lieu de l'arrondir. Le texte semi-transparent est d'abord fusionné avec le fond, exactement comme le navigateur le dessine.
Qu'est-ce que l'APCA ?
L'Accessible Perceptual Contrast Algorithm (APCA) est la méthode de contraste candidate pour la future WCAG 3. Elle fournit une valeur de contraste de luminance Lc allant d'environ 0 à 106 (négative pour un texte clair sur fond sombre) et tient compte de la polarité : le clair sur sombre et le sombre sur clair ne sont pas perçus de la même façon. À titre indicatif, Lc 90 est recommandé pour le texte courant, Lc 75 est le minimum pour le texte courant et Lc 60 pour les autres contenus textuels. L'APCA est encore un brouillon : pour la conformité, appliquez aujourd'hui les WCAG 2.x et utilisez l'APCA comme second avis, surtout pour les thèmes sombres.
Corriger une paire qui échoue
Le tableau des suggestions trouve la couleur la plus proche qui réussit en ne modifiant que la luminosité HSL du texte ou du fond, ce qui préserve la teinte de votre marque. Pour des variantes plus sombres ou plus claires d'une couleur de marque, générez une gamme complète de teintes et d'ombres avec le convertisseur de couleurs, puis testez les paires ici. Dans Webflow, l'aperçu de vision du Designer simule les déficiences de vision des couleurs, mais n'affiche pas de ratio : vérifiez les valeurs exactes ici avant de publier.
Aussi recherché comme : contraste wcag, ratio de contraste, accessibilité web, a11y, contraste aa aaa, apca, contraste des couleurs, contraste texte.
Outils complémentaires : Vérificateur de contraste
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Vérificateur alt d'images — Auditez toutes les images d'une page dans un seul tableau : état du texte alt, taille du fichier, attributs largeur/hauteur, format et chargement différé, avec filtres et export CSV.
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Convertisseur HEX vers RGBA — Collez un code HEX, faites glisser le curseur d'opacité et copiez le CSS exact dont vous avez besoin : rgba() classique, rgb( / alpha) moderne ou HEX à 8 chiffres.