# Checking the colour contrast of an HMI supervision screen

Source : https://consignestudio.fr/en/guides/hmi-colour-contrast-checker/ · published 2026-10-27 · Antoine Despres, Consigne

An alarm colour has to stand out against the screen background, including for a colour-blind operator or under difficult lighting. WCAG 2.2 gives measurable thresholds: 3:1 for a badge or symbol, 4.5:1 for normal text. Enter the colour and the background, and the tool computes the ratio and shows the result.

## The thresholds to remember

| Element | Minimum ratio | WCAG 2.2 criterion |
|---|---|---|
| Normal text (values, labels) | 4.5:1 | 1.4.3 |
| Large text (18 pt, about 24 px, or 14 pt bold, about 18.5 px) | 3:1 | 1.4.3 |
| Alarm badge, state symbol, trend line | 3:1 against adjacent colours | 1.4.11 |

WCAG is not an industrial HMI standard, but its thresholds are measurable and widely recognised. They give an objective basis to the question "is this colour visible enough?". ISA-101 deals with the HMI design process and philosophy; it does not replace a contrast measurement.

## How the ratio is computed

The contrast ratio compares the relative luminance of the two colours:

1. Convert each 8-bit channel to the 0 to 1 range (divide by 255).
2. Linearise it: values up to 0.04045 are divided by 12.92; above that, the formula is ((c + 0.055) / 1.055) raised to the power 2.4.
3. Relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B.
4. Ratio = (L of the lighter colour + 0.05) / (L of the darker colour + 0.05).

The result runs from 1:1 (identical colours) to 21:1 (black on white). The W3C is explicit that the value must not be rounded before comparison: 4.499:1 does not meet 4.5:1.

Green carries most of the luminance (the 0.7152 coefficient), blue very little. That is why a saturated yellow is almost as bright as a light grey, while a saturated blue or purple is dark.

## What the calculation shows on a grey background

High-performance HMIs use a light grey background. Here are the contrast ratios of common alarm colours on the grey #D4D7DA, and on a dark background #1B1E21, computed with the formula above and given to two decimals:

| Colour | On light grey #D4D7DA | On dark #1B1E21 |
|---|---|---|
| Red #C8102E | 4.07:1 | 2.85:1 |
| Bright red #E4002B | 3.35:1 | 3.46:1 |
| Orange #FF8C00 | 1.61:1 | 7.18:1 |
| Yellow #FFD100 | 1.01:1 | 11.46:1 |
| Cyan #00A3CC | 2.04:1 | 5.67:1 |
| Purple #7A3E9D | 4.84:1 | 2.39:1 |
| Dark grey outline #333333 | 8.74:1 | 1.33:1 |

Two lessons. First, **a yellow or orange that still reads as yellow or orange never reaches 3:1 on a light grey**: the badge on its own is close to invisible for part of the operators, and the yellow above is at 1.01:1, practically the same luminance as the background. Second, a dark background is not a miracle cure: reds and purples lose there what yellows gain.

The last row explains the fix described below: a dark outline reaches 8.74:1 on the light grey, and also 8.65:1 against the yellow fill itself.

## The fix: do not make colour carry everything

WCAG success criterion 1.4.1 says it plainly: colour must not be the only visual means of conveying information. For an HMI, that gives three rules:

1. **A dark outline** around every light badge. The outline provides the contrast, and the fill colour stays recognisable.
2. **One shape per priority**: triangle, diamond, square, circle. A colour-blind operator tells the shapes apart.
3. **A number or text** in the badge, plus an accessible label, for screen readers and to remove any doubt.

Try a colour in the tool above with and without an outline: the sample shows the difference.

> A ratio that passes on your design monitor is not the end of the story. Control room screens are often viewed from further away, at an angle, under different lighting. Treat 3:1 as a floor, not a target.

## Common mistakes

* **Measuring against the wrong neighbour.** Criterion 1.4.11 compares a graphical object with its adjacent colours. A badge drawn on a white card inside a grey screen must be measured against the white, not the grey.
* **Checking only the alarm colours.** Data quality indicators (uncertain, bad, stale), disabled controls and trend pens need the same check, on every background they appear on.
* **Relying on transparency.** A semi-transparent colour has no fixed contrast: its result depends on what lies underneath. Measure the colour as actually rendered.
* **Measuring once.** A theme change, a new monitor profile or a dark mode added later can undo a palette that passed.

## When to measure

* When you define the HMI style guide: for every alarm colour and every data quality colour, on every background in use.
* For every new background or theme: night mode, control room wall screen, tablet.
* During an audit of existing screens: print a screenshot in greyscale, then measure the colours that merge.

A quick way to keep the check honest is to store the colours as design tokens (CSS custom properties, for example) and recompute the ratios whenever a token changes, rather than eyeballing each screen.

## Going further

The [High-Performance HMI guide](https://consignestudio.fr/en/high-performance-hmi-guide/) offers a palette in which each colour has a single meaning, with computed contrasts, light and dark CSS tokens, and a Playwright script with a simulated colour-blindness mode to check your screens. [hmi-kit](https://consignestudio.fr/en/hmi-web-components/) provides the alarm banner and alarm list as Web Components; its colours are CSS variables, and the yellow priority badge keeps a dark outline by default to remain visible on a light background. Neither replaces a measurement of your own screens. The guide [High-performance HMI: 8 rules for a web screen](https://consignestudio.fr/en/guides/high-performance-hmi-rules/) puts contrast back into the overall approach.

## Sources

- [W3C, WCAG 2.2, success criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum)
- [W3C, WCAG 2.2, success criterion 1.4.11 Non-text Contrast](https://www.w3.org/TR/WCAG22/#non-text-contrast)
- [W3C, WCAG 2.2, success criterion 1.4.1 Use of Color](https://www.w3.org/TR/WCAG22/#use-of-color)
- [W3C, Understanding SC 1.4.3 Contrast (Minimum), relative luminance and contrast ratio formulas](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- ANSI/ISA-101.01-2015, Human Machine Interfaces for Process Automation Systems (not reproduced)
- Pages checked on 2026-10-27