AnyTools
🌓
Calculateur de contraste des couleurs
Vérifiez les rapports de contraste WCAG 2.1 entre les couleurs de premier plan et d'arrière-plan, prévisualisez du texte exemple et voyez instantanément les résultats de réussite AA/AAA.
Entrées de couleur
Premier plan
Arrière-plan
Aperçu
Texte exemple
Titre d'aperçuLes interfaces accessibles associent des couleurs de marque vibrantes avec suffisamment de contraste pour garder la copie lisible.
Résultats de contraste
Rapport de contraste
19.79:1
Luminance relative
Premier plan0.003
Arrière-plan1.000
| Critère | Requis | État | Notes |
|---|---|---|---|
| AA – texte normal | 4.5:1 | Réussi | Corps du texte ≥ 4.5:1 |
| AAA – texte normal | 7.0:1 | Réussi | Copie de haute importance ≥ 7:1 |
| AA – texte volumineux | 3.0:1 | Réussi | Texte ≥ 18pt régulier ou 14pt gras ≥ 3:1 |
| AAA – texte volumineux | 4.5:1 | Réussi | Texte volumineux ≥ 4.5:1 |
| Graphiques/icônes d'interface | 3.0:1 | Réussi | Icônes essentielles et états visuels ≥ 3:1 |
Conseils de conception
Utilisez le tableau de rapports comme garde-fou et itérez jusqu'à ce que chaque état atteigne le niveau cible.
- Ajoutez de la transparence ou des superpositions lors du placement de texte sur des photographies pour préserver le contraste.
- Réservez AAA pour les copies critiques ; AA est un excellent défaut pour la plupart des tableaux de bord.
- Documentez les paires de couleurs approuvées dans votre système de conception afin que les développeurs réutilisent les palettes conformes.
❓Qu'est-ce que le test de contraste des couleurs
Le test de contraste des couleurs garantit que le texte ou les icônes restent lisibles en mesurant la différence entre la luminance du premier plan et de l'arrière-plan, une exigence clé dans les WCAG et la plupart des directives de marque.
✨Fonctionnalités principales
🎨
Sélection de couleurs en direct
Ajustez les couleurs de premier plan et d'arrière-plan avec le sélecteur Ant Design ou saisissez des valeurs HEX précises.
📊
Matrice WCAG
Consultez les exigences AA/AAA pour le texte normal, le texte volumineux et les graphiques d'interface utilisateur dans un seul tableau.
🧮
Luminance précise
Les rapports de contraste suivent WCAG 2.1 en utilisant des canaux RVB linéarisés et incluent des lectures de luminance par couleur.
👁️
Bloc de prévisualisation
Testez les titres et les paragraphes dans une carte d'exemple en direct avec votre palette choisie.
📋Guide d'utilisation
Choisir les couleurs
Sélectionnez ou collez des valeurs HEX pour le premier plan et l'arrière-plan.
Examiner le rapport
Vérifiez le rapport de contraste calculé et le tableau AA/AAA pour les informations réussite/échec.
Ajuster la copie
Modifiez le texte exemple pour prévisualiser des étiquettes, boutons ou copies marketing réels.
📚Introduction technique
🔢Luminance relative
Chaque canal RVB est converti en une valeur linéaire à l'aide de la courbe gamma WCAG avant de calculer la luminance avec les coefficients 0.2126, 0.7152 et 0.0722.
⚖️Rapport de contraste
La formule de rapport (L1 + 0.05) / (L2 + 0.05) compare les couleurs plus claires et plus foncées pour assurer une lisibilité cohérente sur tous les appareils.
📐Seuils
Le texte normal AA nécessite ≥ 4.5:1, le texte volumineux ≥ 3:1, le normal AAA nécessite 7:1, le grand AAA 4.5:1, et les objets graphiques doivent respecter 3:1.
❓
Frequently Asked Questions
❓
Le texte volumineux utilise-t-il des seuils différents ?
Oui. Le texte ≥ 18px régulier ou 14px gras est qualifié de volumineux et ne nécessite que 3:1 pour AA ou 4.5:1 pour AAA.
💬
Commentaire tester les dégradés ?
Vérifiez les arrêts les plus clairs et les plus foncés du dégradé. Chaque paire d'arrêts doit respecter le rapport souhaité.
🔍
Les icônes comptent-elles comme du texte ?
Les icônes pleines et les graphiques d'interface utilisateur essentiels doivent avoir au moins un contraste de 3:1 par rapport à leur arrière-plan.
💡How To & Tips
🧭
Commencer avec la palette de marque
Échangez rapidement les couleurs pour tester les thèmes clair et sombre à partir de la même palette de base.
🪄
Itérer par petites étapes
Ajustez les valeurs HEX ou utilisez le curseur du sélecteur de couleurs pour voir Commentaire de petits ajustements affectent la conformité.
📝
Prévisualiser le contenu
Collez une copie d'interface utilisateur réelle dans le bloc de prévisualisation pour évaluer la hiérarchie et l'emphase.
🔗Related Documents
📖WCAG 2.1 Contraste (Critère de réussite 1.4.3)-Orientations officielles sur les niveaux de contraste minimum pour le texte et les Images de texte.
🧭MDN - Calcul de la luminance-Contexte sur la formule RVB linéaire utilisée dans les outils d'accessibilité.
📐W3C - Mathématiques du rapport de contraste-Détails sur la formule de rapport, l'arrondi et la justification.
🎨Cartes de conception inclusive-Conseils sur l'association des couleurs et de la typographie pour des publics divers.
📝Journal des mises à jour
📌v1.0.251117v1.0.0Version initiale avec tableau WCAG, lecture de luminance et carte de prévisualisation en direct.(17 nov. 2025)
📦Composants recommandés
User Comments
Loading...