Calculateur de Ratio de Contraste de Couleur (WCAG)
Calculateur de Ratio de Contraste de Couleur (WCAG)
Entrez une couleur de premier plan (texte) et une couleur d'arrière-plan sous forme de codes hex. Cela calcule leur ratio de contraste en utilisant la formule WCAG et vous indique quels niveaux de conformité d'accessibilité (AA, AAA) la combinaison respecte.
- Formule : Ratio de Contraste = (L1 + 0.05) ÷ (L2 + 0.05), où L1 et L2 sont la luminance relative de la couleur claire et foncée, selon la formule WCAG 2.x.
- Seuils WCAG : AA nécessite 4.5:1 pour le texte normal et 3:1 pour le texte large (18pt+ ou 14pt+ gras) ; AAA nécessite 7:1 pour le texte normal et 4.5:1 pour le texte large.
- Fonctionne entièrement dans votre navigateur : vos couleurs sont calculées localement avec JavaScript et jamais envoyées à un serveur.
Qu'est-ce qui compte comme "texte large" pour le seuil AA/AAA inférieur ?
18pt (24px) de poids normal ou 14pt (~18.5px) gras ou plus grand — le texte large est plus facile à lire à un contraste plus faible.
Mes couleurs échouent au WCAG AA — que dois-je changer ?
Assombrissez la couleur la plus foncée, éclaircissez la plus claire, ou les deux — même de petits ajustements de luminosité peuvent augmenter significativement le ratio de contraste.
Calculateur de Ratio de Contraste de Couleur (WCAG)
Entrez une couleur de premier plan (texte) et une couleur d'arrière-plan sous forme de codes hex. Cela calcule leur ratio de contraste en utilisant la formule WCAG et vous indique quels niveaux de conformité d'accessibilité (AA, AAA) la combinaison respecte.
- Formule : Ratio de Contraste = (L1 + 0.05) ÷ (L2 + 0.05), où L1 et L2 sont la luminance relative de la couleur claire et foncée, selon la formule WCAG 2.x.
- Seuils WCAG : AA nécessite 4.5:1 pour le texte normal et 3:1 pour le texte large (18pt+ ou 14pt+ gras) ; AAA nécessite 7:1 pour le texte normal et 4.5:1 pour le texte large.
- Fonctionne entièrement dans votre navigateur : vos couleurs sont calculées localement avec JavaScript et jamais envoyées à un serveur.
Qu'est-ce qui compte comme "texte large" pour le seuil AA/AAA inférieur ?
18pt (24px) de poids normal ou 14pt (~18.5px) gras ou plus grand — le texte large est plus facile à lire à un contraste plus faible.
Mes couleurs échouent au WCAG AA — que dois-je changer ?
Assombrissez la couleur la plus foncée, éclaircissez la plus claire, ou les deux — même de petits ajustements de luminosité peuvent augmenter significativement le ratio de contraste.