Vérificateur de Contraste de Couleurs
Vérifiez les ratios de contraste de couleurs pour la conformité à l'accessibilité WCAG. Testez les combinaisons de couleurs de premier plan et d'arrière-plan pour vous assurer que vos designs sont accessibles à tous les utilisateurs.
Live Preview
Sample Text
Voici à quoi ressemblera votre texte avec la combinaison de couleurs sélectionnée.
Ratio de contraste
14.18
Excellent
Copie le ratio, les couleurs et les résultats WCAG
Conformité WCAG
Min. ratio: 4.5:1
Regular text under 18pt / 14pt bold
Min. ratio: 7:1
Enhanced contrast for regular text
Min. ratio: 3:1
Text 18pt+ or 14pt+ bold
Min. ratio: 4.5:1
Enhanced contrast for large text
Min. ratio: 3:1
Icons, borders, form controls
Min. ratio: 3:1
Charts, graphs, meaningful graphics
Preset Combinations
Table des matières
Qu'est-ce que le contraste de couleur ?
Le contraste de couleur fait référence à la différence de luminance (luminosité) entre deux couleurs. Lorsqu'un texte est placé sur un fond, le ratio de contraste détermine avec quelle facilité le texte peut être distingué de son arrière-plan. Un ratio de contraste plus élevé signifie une meilleure visibilité et lisibilité.
Le ratio de contraste est calculé à l'aide d'une formule définie par le World Wide Web Consortium (W3C) dans le cadre des Règles pour l'accessibilité des contenus Web (WCAG). Cette formule compare la luminance relative de deux couleurs pour produire un ratio allant de 1:1 (pas de contraste, couleurs identiques) à 21:1 (contraste maximum, noir sur blanc ou vice versa).
Comprendre et tester le contraste de couleurs est essentiel pour créer des sites web et des applications accessibles utilisables par tous, y compris les personnes malvoyantes.
Règles WCAG expliquées
Les Règles pour l'accessibilité des contenus Web (WCAG) définissent des exigences spécifiques de ratio de contraste pour différents types de contenu. Ces règles sont organisées en deux niveaux de conformité : AA (minimum) et AAA (amélioré).
| Type de contenu | Niveau AA | Niveau AAA |
|---|---|---|
| Texte normal (moins de 18pt / 14pt gras) | 4.5:1 | 7:1 |
| Grand texte (18pt+ / 14pt+ gras) | 3:1 | 4.5:1 |
| Composants UI et Graphiques | 3:1 | N/A |
Niveau AA (Minimum)
Le niveau AA est le standard de base que la plupart des organisations cherchent à atteindre. Il garantit que le contenu est lisible par les utilisateurs ayant une vision modérément faible, ce qui représente une part significative de la population. La plupart des exigences légales d'accessibilité font référence au WCAG 2.1 Niveau AA.
Niveau AAA (Amélioré)
Le niveau AAA offre une accessibilité améliorée et est recommandé pour les utilisateurs ayant des déficiences visuelles plus graves. Bien qu'atteindre AAA pour tout le contenu ne soit pas toujours réalisable, c'est bénéfique pour le contenu critique comme la navigation principale et le texte important.
Pourquoi le contraste est important
Un bon contraste de couleur est essentiel pour plusieurs raisons :
- Déficiences visuelles : Environ 1 homme sur 12 et 1 femme sur 200 ont une forme de déficience de la vision des couleurs. Un contraste approprié garantit que le contenu est lisible quelle que soit la perception des couleurs.
- Yeux vieillissants : À mesure que les gens vieillissent, la capacité de leurs yeux à distinguer les couleurs et à percevoir le contraste diminue. Un bon contraste aide à maintenir la lisibilité pour les utilisateurs plus âgés.
- Conditions environnementales : Les reflets d'écran, la lumière solaire vive et les conditions de faible luminosité affectent l'apparence des couleurs. Le texte à contraste élevé reste lisible dans diverses conditions.
- Conformité légale : De nombreux pays ont des lois exigeant que les sites web respectent les normes d'accessibilité. L'Americans with Disabilities Act (ADA) et une législation similaire font souvent référence aux directives WCAG.
- Meilleure UX pour tous : Le texte à contraste élevé est plus facile et plus rapide à lire pour tous les utilisateurs, réduisant la fatigue oculaire et améliorant l'expérience utilisateur globale.
- Avantages SEO : Les moteurs de recherche considèrent de plus en plus l'accessibilité comme un facteur de classement, rendant la conception accessible bénéfique également pour la visibilité.
Comment utiliser cet outil
1. Entrez vos couleurs
Utilisez les sélecteurs de couleurs ou entrez des codes de couleur hexadécimaux directement. La couleur de premier plan représente votre couleur de texte, tandis que la couleur d'arrière-plan représente la surface derrière le texte.
2. Examinez les résultats
L'outil calcule instantanément le ratio de contraste et vous montre quels niveaux de conformité WCAG votre combinaison de couleurs passe. Recherchez les badges verts "PASSE" pour confirmer l'accessibilité.
3. Utilisez l'aperçu
La zone d'aperçu en direct montre exactement comment votre texte apparaîtra sur le fond. Cela vous aide à faire des jugements visuels en plus du ratio numérique.
4. Appliquez les suggestions
Si votre combinaison ne respecte pas les exigences WCAG, l'outil suggérera des couleurs ajustées qui respectent le ratio de contraste minimum tout en restant proches de votre choix original.
Meilleures pratiques
Testez tôt et souvent
Vérifiez le contraste de couleurs lors de la phase de conception, pas après le développement. Il est beaucoup plus facile d'ajuster les couleurs dans les maquettes que de refactoriser les interfaces implémentées.
Ne vous fiez pas uniquement à la couleur
Utilisez des indices visuels supplémentaires comme des icônes, des soulignements ou des motifs pour transmettre des informations. Cela aide les utilisateurs qui peuvent avoir du mal à distinguer certaines couleurs.
Considérez tous les états
Testez le contraste pour tous les états interactifs : les états de survol, de focus, actif et désactivé doivent tous maintenir des ratios de contraste adéquats.
Faites attention à la taille du texte
N'oubliez pas que le grand texte (18pt+ ou 14pt+ gras) a des exigences de contraste inférieures. Utilisez cela à votre avantage pour les titres tout en vous assurant que le texte du corps respecte des normes plus strictes.
Documentez votre système de couleurs
Créez et maintenez une palette de couleurs documentée avec des combinaisons approuvées. Cela assure la cohérence dans votre projet et accélère les futures décisions de conception.
Questions fréquentes
Le niveau AA est le standard minimum que la plupart des organisations doivent atteindre. Il requiert un ratio de contraste de 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA est une accessibilité améliorée, nécessitant 7:1 pour le texte normal et 4,5:1 pour le grand texte. Bien que AAA soit idéal, la conformité AA est généralement suffisante pour les exigences légales et couvre la plupart des utilisateurs malvoyants.
Le grand texte est défini comme du texte d'au moins 18 points (24px) de poids normal, ou d'au moins 14 points (environ 18,5px) en gras. Cela inclut la plupart des titres et du texte d'affichage. Le grand texte a des exigences de contraste inférieures car sa taille le rend intrinsèquement plus lisible.
Cet outil teste actuellement uniquement les couleurs solides (opaques). Pour les couleurs transparentes, vous devriez calculer la couleur effective après sa composition sur son arrière-plan. La couleur finale rendue est ce qui compte pour les tests de contraste.
Le ratio 4,5:1 a été déterminé par des recherches approfondies pour fournir un contraste suffisant aux utilisateurs ayant une vision modérément faible (environ 20/40 de vision). Ce niveau compense la perte de sensibilité au contraste qui accompagne les déficiences visuelles typiques et le vieillissement.
Concentrez-vous sur le test des combinaisons où le texte apparaît : texte du corps sur les fonds, boutons, étiquettes de formulaire, éléments de navigation et tout texte significatif. Les éléments décoratifs sans texte ne nécessitent pas de tests de contraste. Créer une palette de couleurs documentée avec des combinaisons pré-approuvées peut rationaliser ce processus.
Oui, mais vous devez vous assurer que le texte maintient un contraste adéquat contre toutes les parties du dégradé qu'il superpose. Testez contre les zones les plus claires et les plus sombres du dégradé. Si le contraste échoue à un endroit, envisagez d'ajouter une superposition de fond solide derrière le texte.
Le texte sur des images est difficile car l'arrière-plan varie. Les solutions courantes incluent l'utilisation d'une superposition semi-transparente, des ombres de texte ou s'assurer que le texte se trouve dans une zone de couleur cohérente. Testez toujours le pire cas (point de contraste le plus faible) lorsque le texte superpose des arrière-plans variables.
Bien que le contraste maximum (21:1, noir pur sur blanc pur) soit techniquement accessible, certains utilisateurs dyslexiques ou sensibles visuellement le trouvent agressif. Envisagez d'utiliser des arrière-plans blanc cassé (#F5F5F5) ou du texte gris très foncé (#1A1A1A) au lieu des extrêmes purs pour le texte du corps tout en maintenant d'excellents ratios de contraste.