How Should You Design Colors for a Success Screen? Web Design That Clearly Communicates Completion

A success screen appears after actions such as submitting a form, creating an account, or completing a purchase. Its job is to make two things clear: the process has finished, and the user knows what to do next. Rather than assuming that green alone makes a screen communicate success, combine color with a completion message, an icon or other visual cue, and a clear next action. This article uses a light background with restrained green accents to show one practical way to make completion easy to recognize.

Communicate success with words and shape, not green alone

WCAG (Web Content Accessibility Guidelines) 2.2 requires that color not be used as the only visual means of conveying information. On a success screen, do not rely on a switch to green by itself. Add a clear heading such as “Your message has been sent” or “Your order has been received,” and use a check mark or another shape when it helps reinforce the meaning.

If only the result area updates on the same page without a page change or focus move, the status change also needs to be programmatically identifiable so assistive technologies can present it to users. Treat color as supporting information, while clearly stating what was completed, any confirmation number, and the available next action in text.

Organize completion information with a light background, pale green, and dark text

For one example palette, use off-white ■#F7FAF8 for the page background and dark gray ■#243029 for body text. The contrast ratio (the difference in relative luminance between foreground and background colors) is about 13.06:1. Start with readable explanatory text, then separate the completed state as its own visual surface.

Use pale green ■#EAF7EE for the completion message background, and dark green ■#1F6B3A for the heading, check icon, and border. Dark green ■#1F6B3A against pale green ■#EAF7EE has a contrast ratio of about 5.91:1. This also provides a strong difference when the dark green is used for a meaningful icon or boundary against the pale panel.

If the primary next action, such as “Back to Home” or “View Order,” uses a dark green ■#1F6B3A button, white text ■#FFFFFF gives a contrast ratio of about 6.52:1. For secondary explanatory text, medium gray ■#5B6470 against off-white ■#F7FAF8 is about 5.71:1.

Keep the brand palette and use the success color only where it helps

A success screen does not need to turn the entire site green. Keep the usual background, body text, header, and navigation colors, then use the success color only on the completion panel, icon, or a small amount of emphasis. The next-step button can continue using the existing brand color if that color has sufficient contrast in its actual foreground and background combination.

WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text and 3:1 for large text. Non-text visual information needed to identify a control or understand a meaningful icon generally needs at least 3:1 against adjacent colors. 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 pairs of custom colors or automatically determine AA or AAA conformance, so the contrast between the actual background and text, icon, or boundary colors should be checked separately.