WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Progress bar color contrast

for

From: glen walker
Date: Jan 25, 2023 8:54PM

The short answer is you don't need contrast (according to WCAG), although
certainly recommended.

There are 3 contrasts to check.

1. The empty bar with the background.
2. The filled bar with the background.
3. The empty compared to the filled

You really need to be able to discern all of them in order to tell the
progress.

All three are addressed in WCAG 1.4.11, the "User Interface Components"
part. The user needs to be able to identify the component AND the state
(how much of the progress bar is filled).

If the empty (white) bar does not have sufficient contrast with the
background (light blue), you won't be able to tell where the bar ends (the
right end of the bar in your image example). If I don't know where the bar
ends, I won't be able to tell how far along it is. Now in your example,
you also had a percentage so that can help with understanding the state.
If you consider the percentage as part of the widget, then technically a
user doesn't need to be able to see where the bar ends in order to
determine the state (the state being how much progress is done). 1.4.11
says that "visual information required to identify [the] state" must have a
contrast of at least 3:1 to its adjacent color. If the progress bar ONLY
had two color halfs (and no text percentage), then that would be the only
visual clue and it would need sufficient contrast. But with the percentage
(assuming the percentage text has sufficient contrast according to 1.4.3),
then the bar color wouldn't matter. I would still encourage it to have
sufficient contrast with the background, but it's not necessarily required
by WCAG.

(Note, your percentage text color is roughly #1E96F3 and when compared to
the light blue background, #DEEFFF, has a contrast of 2.7:1, so it doesn't
have enough contrast. If the text is 14pt/bold or 18pt/normal or larger,
then you only have to tweak the blue a little bit to get to 3:1. But if
the text is smaller, then you need to get it to 4.5:1.)

The same argument goes with the filled (blue) half of the bar. If you
can't discern where the bar starts because it doesn't have sufficient
contrast with the background (light blue), then you can't tell how far
along the progress is. But again, you have a percentage value so 1.4.11
doesn't necessarily apply.

And the same with comparing the empty to the filled part of the bar. The
dark blue filled bar and the white unfilled bar need at least a 3:1
contrast between them in order to see the progress. But again, you have a
percentage value so the contrast isn't required, although in this case, the
contrast of the blue to the white is about 3.1:1 so you're ok anyway.

But I'll repeat again that you should try to have as much contrast as
possible even if that contrast is below the recommendation. One way to do
that for the two bar halves is to have a black vertical line between the
two halves. Make it at least several pixels thick so that it's obvious.
The black line against the blue bar and the black line against the white
bar both have sufficient contrast (6.7:1 and 21:1, respectively).
(Although, again, the current blue filled bar and empty white bar have a
3.1:1 contrast so it's ok, but the black vertical line would make it more
obvious.)

You could even do the same thing for the full length of the bar, put a
black border around it, which I think you alluded to by saying an outline
around the bar. That would give it sufficient contrast against the
background (adjacent color).