Progress bars and indicators colour contrast accessibility

Hello,

I am a Digital Designer working on a web application and I would like to seek clarification on how WCAG 1.4.11 Non-text Contrast applies to progress bar tracks when accompanying text labels are present.

We have two cases:


  1.
A linear determinate progress bar where the track colour does not meet the 3:1 contrast ratio against the page background. The bar is accompanied by a filename, file type, file size, a percentage value, and a record count (e.g. "25% (3/12)").

  2.
A segmented progress bar used to show completion status. It has three segments: a green portion representing successful records, a red portion representing errors, and a grey track representing the remaining work. A percentage label and record count are shown alongside the bar to indicate overall progress.

Our understanding from the 1.4.11 guidance is that a graphical element may be exempt from the contrast requirement if the same information is conveyed through text, making the graphic redundant.

With that in mind, we have two questions:


  1.
In case one, does the presence of the percentage and record count labels mean the track colour is exempt from the 3:1 contrast requirement under 1.4.11?

  2.
In case two, the grey track again does not meet 3:1 contrast on its own. However, the red and green segments convey distinct meaning that is not fully replicated by the text labels alone. Would the grey track be considered redundant given the percentage label, while the coloured segments would still need to meet contrast requirements independently?

Any guidance on how to interpret these scenarios would be greatly appreciated.

Thank you for your time.


Best wishes,
Amrita

Received on Friday, 27 March 2026 05:55:54 UTC