How Should You Choose Colors for Status Displays? Color Schemes for Completed, In-Progress, and Stopped States

Status displays should make it easy to distinguish “Completed,” “In Progress,” and “Stopped” at a glance. However, if green, blue, gray, or other colors carry the entire meaning, the state may not be clear to people who cannot easily distinguish those colors. Keep the state name visible as text and use color as a supporting cue. The example below uses pale backgrounds with darker text for three status styles.

Make the state name the primary information and use color as support

Display “Completed,” “In Progress,” and “Stopped” as visible text rather than relying on color alone. Even if you add a dot or icon, keeping labels such as “● Completed,” “● In Progress,” and “■ Stopped” means the status remains understandable without identifying the hue. Different shapes can also help, but the readable state name should remain the main cue.

WCAG (Web Content Accessibility Guidelines) 2.2 requires that color not be the only visual means of conveying information. Also, “Stopped” does not necessarily mean an error or danger. If red already represents errors, deletion, or another high-risk meaning on the site, a neutral gray stopped state can avoid conflicting semantics.

Separate completed, in-progress, and stopped states with pale backgrounds and dark text

The color values below are HEX codes, a hexadecimal notation used to represent colors on the web. For Completed, pale green ■#ECFDF3 with dark green ■#166534 text has a contrast ratio, the difference in relative luminance between a foreground and background, of about 6.76:1. If green ■#15803D is used for a left border or meaningful icon, it has about 4.76:1 contrast against ■#ECFDF3.

For In Progress, pale blue ■#EFF6FF with dark blue ■#1E40AF text provides about 8.01:1. Blue ■#2563EB used for a supporting border or icon has about 4.75:1 contrast against that background. An in-progress state does not have to rely on animation; keep visible text such as “In Progress” or a progress percentage so the state is understandable even when nothing is moving.

For Stopped, light gray ■#F3F4F6 with dark gray ■#4B5563 text provides about 6.87:1. Gray ■#6B7280 used for a line or icon has about 4.39:1 contrast against the background. Because ■#6B7280 falls below the 4.5:1 minimum for normal-size text on this background, keep it to supporting lines, icons, or other non-text visuals rather than body text.

Check text and icons against the criteria that apply to each role

WCAG 2.2 requires at least 4.5:1 contrast for normal-size text and at least 3:1 for large text. For meaningful icons and visual information needed to identify a user-interface component or state, the non-text contrast minimum is 3:1 against adjacent colors. The same color can therefore be acceptable for an icon or border while still being unsuitable for normal-size text.

If status labels also work as clickable filters or buttons, do not show the selected state through color alone. Add a checkmark, border, heavier type, or visible selection label. Disabled and stopped states can also become confusing if both use the same faint gray, so distinguish them through wording or shape as well.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX codes, a hexadecimal notation used to represent colors on the web, or with the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual adjacent background, text, and icon combinations used in the status display separately.