RE: [EXTERNAL] Progress bars and indicators colour contrast accessibility

It's worth noting that it is possible to select three colours that have at least a 3:1 colour contrast ratio with each other, albeit the available colour palette is quite limited. However, it is not possible to select four colours that have at least a 3:1 colour contrast ratio with each other.

Steve Green
Managing Director
Test Partners Ltd

From: Mark Magennis <Mark.Magennis@skillsoft.com>
Sent: 27 March 2026 10:45
To: Amrita Shrilal <Amrita.Shrilal@costellomedical.com>; w3c-wai-ig@w3.org
Subject: Re: [EXTERNAL] Progress bars and indicators colour contrast accessibility

Hi Amrita,

You're right in case 1. The progress bar doesn't provide any more information so it needn't meet contrast requirements.

Case 2 is a bit more complex and it depends on the actual design which I can't see. But assuming the bar is made up of, from left to right, a green portion, then a red portion, then a grey portion:

1. The green portion needs minimum 3:1 contrast against both the background and the adjacent red portion.
2. The red portion needs to contrast against the background, the adjacent green portion, and the adjacent grey portion.
2. The grey portion needs to contrast against the adjacent red portion, but may also need to contrast against the background because its length determines the length of the whole bar. You'll need to look at the design and imagine the grey portion wasn't there at all. Would any information be lost? If so, then the length of the grey portion is informational and it needs to contrast against the background so you can see its length.

In practice, you may have difficulty finding shades of green, red, and grey that meet all of these contrast requirements. A possible solution is to add thin light or dark spacers between the colours, then these spacers will be the bars' adjacent colours and users may be able to tell the length of each portion even if the bar colours don't contrast well enough against each other. Another option may be to add textures such as crosshatching to some of the bars.

There is another consideration though - users must be able to tell which of the bars means "successful", which means "errors", and which means "remaining". How do they do that? You can't rely on users guessing the meanings of the colours, as in "green means good", "red means bad", "grey means something else". This would violate WCAG 1.4.1 Use of Color. I don't know how you will do this. You might think of adding labels but I imagine the green and red sections start being zero length and steadily increase, so at the start you won't have anywhere you can put a label underneath to give that information. So you'll need to think about that.

Mark


________________________________
From: Amrita Shrilal <Amrita.Shrilal@costellomedical.com<mailto:Amrita.Shrilal@costellomedical.com>>
Sent: Friday, March 27, 2026 05:54
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org> <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: [EXTERNAL] Progress bars and indicators colour contrast accessibility

You don't often get email from amrita.shrilal@costellomedical.com<mailto:amrita.shrilal@costellomedical.com>. Learn why this is important<https://aka.ms/LearnAboutSenderIdentification>
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)").


  1.  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?


  1.  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