Check the contrast of an HMI colour
Computed in your browser: nothing is sent. Relative luminance formula and WCAG 2.2 thresholds: 4.5:1 for text (criterion 1.4.3), 3:1 for large text and for graphical objects required to understand the content (criterion 1.4.11). Colours as #RRGGBB or #RGB.
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:
- Convert each 8-bit channel to the 0 to 1 range (divide by 255).
- 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.
- Relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B.
- 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:
- A dark outline around every light badge. The outline provides the contrast, and the fill colour stays recognisable.
- One shape per priority: triangle, diamond, square, circle. A colour-blind operator tells the shapes apart.
- 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.
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 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 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 puts contrast back into the overall approach.
Sources
- W3C, WCAG 2.2, success criterion 1.4.3 Contrast (Minimum)
- W3C, WCAG 2.2, success criterion 1.4.11 Non-text Contrast
- W3C, WCAG 2.2, success criterion 1.4.1 Use of Color
- W3C, Understanding SC 1.4.3 Contrast (Minimum), relative luminance and contrast ratio formulas
- ANSI/ISA-101.01-2015, Human Machine Interfaces for Process Automation Systems (not reproduced)
- Pages checked on 2026-10-27