# Vérifier le contraste des couleurs d'une IHM de supervision

Source : https://consignestudio.fr/guides/contraste-couleurs-ihm/ · publié le 2026-10-27 · Antoine Despres, Consigne

Une couleur d'alarme doit se voir sur le fond de l'écran, même pour un opérateur daltonien ou sous un éclairage difficile. Les WCAG 2.2 donnent des seuils mesurables : 3:1 pour une pastille ou un symbole, 4,5:1 pour un texte courant. Saisissez la couleur et le fond, l'outil calcule le rapport et montre le rendu.

## 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 :

1. **Un contour foncé** autour de chaque pastille claire. C'est le contour qui atteint le contraste, la couleur reste reconnaissable.
2. **Une forme par priorité** : triangle, losange, carré, cercle. L'opérateur daltonien distingue la forme.
3. **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](https://consignestudio.fr/ihm-haute-performance-isa-101/) 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](https://consignestudio.fr/composants-web-ihm-scada/) fournissent la bannière et la liste d'alarmes, triées par priorité. Le guide [8 règles pour un écran web](https://consignestudio.fr/guides/ihm-haute-performance-regles/) replace le contraste dans l'ensemble de la démarche.

## Sources

- [W3C, WCAG 2.2, critère 1.4.3 Contraste (minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum)
- [W3C, WCAG 2.2, critère 1.4.11 Contraste du contenu non textuel](https://www.w3.org/TR/WCAG22/#non-text-contrast)
- [W3C, WCAG 2.2, critère 1.4.1 Utilisation de la couleur](https://www.w3.org/TR/WCAG22/#use-of-color)
- ANSI/ISA-101.01-2015, Human Machine Interfaces for Process Automation Systems (non reproduite)