Vérifier le contraste d'une couleur d'IHM
Calcul fait dans votre navigateur : rien n'est envoyé. Formule de luminance relative et seuils des WCAG 2.2 : 4,5:1 pour le texte (critère 1.4.3), 3:1 pour le grand texte et pour les éléments graphiques nécessaires à la compréhension (critère 1.4.11). Couleurs au format #RRGGBB ou #RGB.
Les seuils à retenir
| Élément | Seuil | Critère WCAG 2.2 |
|---|---|---|
| Texte courant (valeurs, libellés) | 4,5:1 | 1.4.3 |
| Grand texte (24 px, ou 18,7 px en gras) | 3:1 | 1.4.3 |
| Pastille d'alarme, symbole d'état, trait de tendance | 3:1 | 1.4.11 |
Les WCAG ne sont pas une norme d'IHM industrielle, mais leurs seuils sont mesurables et reconnus. Ils donnent une base objective à la question « cette couleur se voit-elle assez ? ».
Ce que le calcul révèle sur un fond gris
Les IHM haute performance utilisent un fond gris clair. Voici le rapport de contraste de couleurs d'alarme courantes sur le gris #D4D7DA, et sur un fond sombre #1B1E21 :
| Couleur | Sur gris clair | Sur fond sombre |
|---|---|---|
| Rouge #C8102E | 4,07:1 | 2,85:1 |
| Rouge vif #E4002B | 3,35:1 | 3,46:1 |
| Orange #FF8C00 | 1,61:1 | 7,18:1 |
| Jaune #FFD100 | 1,01:1 | 11,46:1 |
| Cyan #00A3CC | 2,04:1 | 5,67:1 |
| Violet #7A3E9D | 4,84:1 | 2,39:1 |
Deux enseignements. D'abord, un jaune ou un orange lisibles comme tels n'atteignent jamais 3:1 sur un gris clair : la pastille seule est invisible pour une partie des opérateurs. Ensuite, un fond sombre n'est pas une solution miracle : les rouges et violets y perdent ce que les jaunes y gagnent.
La solution : ne pas tout faire porter à la couleur
Le critère 1.4.1 des WCAG le dit simplement : la couleur ne doit pas être le seul moyen de transmettre une information. Pour une IHM, cela donne trois règles :
- Un contour foncé autour de chaque pastille claire. C'est le contour qui atteint le contraste, la couleur reste reconnaissable.
- Une forme par priorité : triangle, losange, carré, cercle. L'opérateur daltonien distingue la forme.
- Un chiffre ou un texte dans la pastille et un libellé accessible, pour les lecteurs d'écran et pour lever le doute.
Testez une couleur dans l'outil ci-dessus, avec et sans contour : l'échantillon montre la différence.
Quand mesurer
- À la création de la charte IHM, pour chaque couleur d'alarme et de qualité de donnée, sur chaque fond utilisé.
- À chaque nouveau fond ou thème (mode nuit, écran de salle de contrôle, tablette).
- Lors d'un audit d'écrans existants : imprimez une capture en niveaux de gris, puis mesurez les couleurs qui se confondent.
Aller plus loin
Le guide IHM haute performance propose une palette où chaque couleur a un seul sens, avec ses contrastes calculés, les jetons CSS en clair et en sombre, et un script qui simule le daltonisme sur vos écrans. Les composants hmi-kit fournissent la bannière et la liste d'alarmes, triées par priorité. Le guide 8 règles pour un écran web replace le contraste dans l'ensemble de la démarche.
Sources
- W3C, WCAG 2.2, critère 1.4.3 Contraste (minimum)
- W3C, WCAG 2.2, critère 1.4.11 Contraste du contenu non textuel
- W3C, WCAG 2.2, critère 1.4.1 Utilisation de la couleur
- ANSI/ISA-101.01-2015, Human Machine Interfaces for Process Automation Systems (non reproduite)