Progress bar

Let’s say you don’t want a border around your progress bar because your design is soooo “clean and modern” or whatever.

What you now have to do is create a progress bar that achieves a 3:1 contrast ratio between its background, value indicator and track limits. Here’s one solution.

This progress bar achieves contrast conformance by ensuring the progress value indicator has a sharp contrast with the background.

The track limit of the whole progress bar is capped with a gray that meets a 3:1 contrast ratio.

When the value indicator reaches the darker portion at the end, a subtle drop shadow ensures contrast conformance there as well.

Of course, it’s way easier to put a dark border around the progress bar and go home early.