Vérifiez le contraste couleur du texte et du fond avec un aperçu lisible et des conseils simples.
Concevez des interfaces accessibles que tout le monde peut utiliser.
Contraste Couleur sert à comparer une couleur de texte et une couleur d’arrière-plan avant de les utiliser dans une interface. Le résultat principal est un ratio de contraste, affiché avec un aperçu lisible du texte, un bouton de démonstration et des indicateurs de lisibilité. Cette lecture immédiate évite de choisir une association agréable visuellement mais trop faible pour un paragraphe, un libellé de formulaire, un bouton ou un message d’erreur.
Le contrôle travaille sur deux rôles précis : le premier plan, utilisé comme couleur du texte, et l’arrière-plan, utilisé comme surface derrière ce texte. Les champs HEX et les sélecteurs de couleur permettent de tester une paire exacte. Les réglages de luminosité et d’opacité aident ensuite à observer comment une couleur devient plus claire, plus foncée, plus transparente ou plus stable selon le contexte d’utilisation.
Le ratio de contraste ne remplace pas un jugement de design, mais il donne une base objective. Un contraste élevé améliore la lecture des petits caractères, des états de survol, des textes secondaires et des interfaces vues sur écran mobile ou dans une lumière forte. Un contraste faible peut rester acceptable pour une décoration, mais il devient risqué dès qu’il porte une information importante.
Le résultat doit être interprété en fonction de la taille du texte et de son importance. Un titre large peut rester lisible avec un ratio plus bas qu’un paragraphe fin. À l’inverse, un texte de navigation, un bouton principal ou un message d’erreur a besoin d’une marge plus confortable, car l’utilisateur doit le lire rapidement et sans hésitation.
| Lecture du ratio | Usage conseillé | Point de vigilance |
|---|---|---|
| 3:1 ou plus | Grand texte et certains éléments d’interface | Insuffisant pour beaucoup de paragraphes courts ou petits libellés. |
| 4.5:1 ou plus | Texte normal conforme au niveau AA | Bonne base pour les contenus courants, mais à vérifier dans les états interactifs. |
| 7:1 ou plus | Texte normal visant le niveau AAA | Utile pour les interfaces où la lisibilité prime sur l’effet visuel. |
| Ratio très faible | Décoration, fond, séparation visuelle | À éviter pour tout texte, bouton, icône informative ou message d’état. |
Les badges de réussite ou d’échec aident à lire ces seuils sans calcul manuel. Si un résultat est partiel, la paire peut convenir à un gros titre mais pas à un texte courant. Dans ce cas, il vaut mieux modifier la luminosité de l’arrière-plan, renforcer la couleur du texte ou choisir une autre teinte de la même famille.
La vérification doit intervenir tôt dans le choix visuel. Corriger une palette après intégration peut imposer de modifier des composants, des illustrations ou des variables CSS déjà utilisées. Tester quelques paires clés dès le départ limite ce risque.
Un échec de contraste ne signifie pas forcément que la couleur doit être abandonnée. Le plus souvent, une correction légère suffit : assombrir le texte, éclaircir le fond, augmenter la saturation d’un accent ou supprimer une opacité qui affaiblit le premier plan. Les curseurs de luminosité permettent de tester ces changements sans quitter l’aperçu.
L’opacité demande plus de prudence. Un texte semi-transparent se mélange visuellement avec la surface qui se trouve derrière lui. Le ratio peut donc devenir moins stable, en particulier sur des fonds variables, des images, des dégradés ou des cartes superposées. Pour les textes importants, la valeur la plus sûre reste souvent une couleur opaque, puis une adaptation de la teinte ou de la luminosité.
Les curseurs de luminosité et d’opacité sont pratiques pour explorer une correction, mais ils ne doivent pas masquer la décision finale. La luminosité modifie la perception de la teinte : une couleur plus sombre peut garder son identité tout en devenant plus lisible sur fond clair. Une couleur plus claire peut mieux fonctionner sur fond sombre, surtout si le texte est petit ou placé dans un bouton étroit.
Les états interactifs doivent être contrôlés séparément. Un bouton au repos peut avoir un bon contraste, puis perdre en lisibilité au survol, au focus, en état désactivé ou pendant une animation. Si la couleur change entre ces états, chaque paire doit être relue comme une combinaison indépendante.
Il est utile de tester les paires qui représentent les situations les plus contraignantes : texte gris sur fond clair, texte blanc sur couleur d’accent, message d’erreur sur fond rosé, lien violet sur fond sombre, étiquette secondaire dans une carte ou texte sur un fond légèrement transparent. Si ces cas passent correctement, les usages plus simples seront généralement plus robustes.
Un bon test de contraste part du rôle réel de la couleur. Un paragraphe long, un petit libellé de formulaire et un bouton principal ne tolèrent pas le même niveau d’incertitude. Le texte courant doit rester lisible sans effort, car il porte souvent l’information principale. Un bouton doit aussi conserver une différence claire entre le libellé, le fond et parfois la bordure. Un badge de statut peut sembler correct dans une maquette, puis devenir difficile à lire quand il est placé dans une carte plus petite ou dans une colonne dense.
Contraste Couleur est adapté lorsqu’une décision porte sur une seule paire : texte contre fond, bouton contre surface, étiquette contre carte ou lien contre arrière-plan. Pour contrôler plusieurs couleurs ensemble, Contraste Couleur Pro permet de comparer une palette entière dans une matrice. Pour ajuster une valeur avant le test, Sélecteur de Couleur aide à choisir une nuance HEX précise.
Une même paire peut être correcte dans un bloc isolé et moins lisible dans une interface complète. Le test doit donc être répété avec les couleurs qui entourent réellement le composant : fond général, carte, bordure, ombre, image proche ou surface en mode sombre. Les polices fines, les tailles réduites et les textes en majuscules accentuent aussi les limites d’une combinaison. Avant de valider une valeur, comparez le ratio avec l’aperçu, puis imaginez la paire dans les zones les plus denses du design.