How Should You Choose Colors for a Progress Bar? Web Color Schemes That Make Progress Easy to Understand

A progress bar used for an upload, application process, or loading task should make it easy to understand how far the task has advanced. A bright fill color alone is not enough. The difference in lightness between the completed and remaining portions, a numeric value, and a clear boundary against the page background can work together to make the status easier to read. This article uses a blue progress color on a white interface as one practical example.

Show progress with length and numbers, not color alone

WCAG (Web Content Accessibility Guidelines) 2.2 requires that color not be used as the only visual means of conveying information. In a progress bar, the length of the filled portion already provides a visual cue, but adding a value such as “65%” and a text label such as “Uploading” makes the current state clearer.

To expose progress to assistive technologies, you can use the HTML <progress> element or role="progressbar". When the current value is known, keep the progress value updated. WAI-ARIA specifies that aria-valuenow should be omitted for an indeterminate progress bar whose value is not known. The visual animation should reflect the actual state rather than imply a made-up percentage.

Separate the blue fill from a neutral track with a clear lightness difference

For one example palette, use white ■#FFFFFF for the page background and dark gray ■#27313A for ordinary text. Their contrast ratio (the difference in relative luminance between foreground and background colors) is about 13.24:1, which keeps numeric values such as “65%” and explanatory text easy to read.

Use blue ■#315D94 for the completed portion and light gray ■#F3F4F6 for the remaining track. Their contrast ratio is about 6.11:1. Because the two areas differ in lightness as well as hue, the filled boundary remains easier to distinguish.

The light gray track ■#F3F4F6 has little contrast with the white page, so add a thin gray outline ■#6B7280 if the full length of the track needs a clearer boundary. Gray ■#6B7280 against white ■#FFFFFF is about 4.83:1. Blue ■#315D94 against white ■#FFFFFF is about 6.72:1, so the same blue can also work for a normal-size progress label placed near the bar.

When using a brand color, check it against the unfilled track too

A progress bar does not have to be blue. If you use a brand color, check its contrast not only against the page background but also against the unfilled track. A pale brand color next to a pale gray track may differ in hue while still having too little lightness difference for the progress boundary to be easy to see. WCAG 2.2 requires a contrast ratio of at least 3:1 against adjacent colors for meaningful graphical information and visual states that users need to perceive.

For indeterminate loading, do not display a guessed value such as “50%.” State that processing is in progress instead. When the task finishes, do not communicate completion only by changing the bar color; add visible text such as “Complete.” In HueRoll, you can choose candidate colors with a three- or six-digit HEX code or the color picker, then check the selected color against white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine AA or AAA conformance, so the actual contrast between the progress fill, track, outline, and text should be checked separately.