What are the WCAG color contrast requirements for a progress indicator?

Question

Elements in Question

• HTML progress element
• iOS progress indicator
• Android progress indicator)

Assumptions

• There is no additional textual information describing the progress indicator
• WCAG conformance and passing accessibility tests are the goal: I am aware of many enhancements and best practices, but those are out of scope of this question

Questions

• Does the border/container need to pass color contrast requirements?
• Does the inactive portion need to pass color contrast?
• What colors need to have sufficient contrast to one another? (e.g., active to unfilled; active to page background, etc.)

Other

From what I can tell, only the active portion needs to meet color contrast. The question is to what? In iOS and Android, the progress indicator stretches the length of the viewport so the length can be more or less known, but in web the length is variable. So in web it would seem that insufficient color contrast on the container/border wouldn't give users the ability to know just how much the bar has been filled.

I've looked at the accessibility documentation in Apple's HIG and Android's Material3 as well as MDN and a search for related questions.

Answer 1

There are two contrast requirements:

1. The outer border of the progress indicator
2. The two segments relative to each other

Both of these fall under the same WCAG 1.4.11 Non-text Contrast checkpoint.

For the first requirement, the user needs to know where the outside edge of the progress indicator is otherwise they won't know where it starts or ends. The indicator could have a dark outline border (if being used on a white background) or if the segments are dark enough, a border might not be needed. The border must have a 3:1 contrast with the page background.

For the second requirement, the two segments next to each other must have a 3:1 contrast to each other. In the sample screenshot, the left segment is blue (#0064B4) and the right segment is light gray (#E6E6E6), giving a contrast of 4.8:1, well above the 3:1 required

Left: #0064B4 (blue)
Right: #E6E6E6 (light gray)
The contrast ratio is: 4.8:1

There's also another WCAG checkpoint that comes into play, WCAG 1.4.1 Use of Color. It's not a contrast requirement but it says that if color by itself is used to indicate meaning, then some other indicator is also needed. In this case, the progress is indicated by how big the blue bar is relative to the light gray bar. If a user had a color deficiency and couldn't distinguish between the blue and the gray, then they wouldn't know the value of the indicator. You'd need text, such as "32%", displayed above or below the progress bar or even inside the bar, although if displayed inside the bar, you'd have to be aware of WCAG 1.4.3 Contrast (Minimum) and make sure the text has sufficient contrast on the bar color.