Accessibility finding
Low contrast of controls, icons, focus indicators and PDF text, measured from pixels
Accessibility Error Severity: Medium
Part of the audit Colour contrast. Finding id: accessibility.pixelContrast.
What it costs you
People with low vision cannot see where a field or button is, or what an icon shows.
What to do
Raise the contrast of the border, icon or chart part to at least [min non text ratio] to 1 against what is next to it. Change it where the colour is defined, so every use is fixed.
What it checks
- Buttons and icons contrast too low
- Keyboard marker contrast too low
How to fix it
Darken the boundary and keep a visible focus style
- Find the rule or token that sets the colour; one colour pair is usually used in many places.
- For text in a PDF, change the colour in the source document and export again.
How to check: Run the measurement again. Then press Tab through the page and watch the focus.
A real case
The UK Government Digital Service monitored 1,203 public sector websites from January 2022 to September 2024. The most common problems were low colour contrast, missing visible focus, parts that cannot be used with a keyboard, and layouts that do not adapt to screen size or zoom.
Thresholds
| Name | Default | Meaning |
|---|---|---|
min_non_text_ratio | 3.0 | Lowest contrast ratio allowed for control boundaries, icons and focus indicators (WCAG 1.4.11: 3 to 1). |
min_text_ratio | 4.5 | Lowest contrast ratio allowed for normal text in a PDF (WCAG 1.4.3: 4.5 to 1). |
min_large_text_ratio | 3.0 | Lowest contrast ratio allowed for large text in a PDF (WCAG 1.4.3: 3 to 1). |