How Should You Choose Colors for a Maintenance Page? Making Information Easy to Understand

A maintenance page needs to explain what is happening, when service is expected to return, and what visitors can do next while normal content is unavailable. Rather than filling the page with strong warning colors, it is usually clearer to keep the main message easy to read and reserve emphasis for information such as the expected restoration time or a support option. This article uses a light neutral background with a restrained blue and pale yellow to show how to organize maintenance information with color.

Make the next step easier to understand, not just the outage more noticeable

When a site is unavailable because of scheduled maintenance or a temporary problem, the whole page does not need to look like an error alert. Start with a readable background and text color, then establish a visual order for the maintenance status, the expected restoration time, and contact information. When an entire site is temporarily unavailable, an HTTP 503 Service Unavailable response can be used while presenting a user-friendly explanation. When possible, also provide an expected recovery time or guidance about when to try again.

Color should support the information hierarchy rather than carry the meaning by itself. For example, use blue ■#315D94 for headings and the primary action, while keeping body text charcoal ■#23272A. This keeps the page restrained while making the main actionable element easier to find.

Use light gray, blue, and pale yellow to separate information priorities

For one practical palette, use light gray ■#F7F8FA for the page background and charcoal ■#23272A for body text. Their contrast ratio (the difference in relative luminance between foreground and background colors) is about 14.17:1. Use blue ■#315D94 for headings or a primary action such as “Check status”; against the page background, the ratio is about 6.33:1.

A pale blue surface ■#EAF2F8 can hold the maintenance summary. Blue ■#315D94 text on that surface has a contrast ratio of about 5.94:1. A primary button with blue ■#315D94 and white text ■#FFFFFF has a ratio of about 6.72:1.

For short information that deserves extra attention, such as the expected restoration time, use pale yellow ■#FFF4D6 with dark brown text ■#7A4B00; the ratio is about 6.76:1. Do not rely on yellow alone to mean “important.” Add explicit text such as “Expected restoration: 6:00 PM” or “Next update: 5:30 PM.”

Do not rely on color alone; check text, boundaries, and recovery information

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text and 3:1 for large text. Visual information needed to identify interface components or meaningful graphics generally needs at least 3:1 against adjacent colors. If a necessary boundary is added, gray ■#6B7280 provides about 4.55:1 against light gray ■#F7F8FA and about 4.27:1 against pale blue ■#EAF2F8.

Visitors should not have to infer “maintenance” or “warning” only from red or yellow. State the condition directly in a heading, then include the expected restoration time, the latest update time, and a support path when those details are available. In HueRoll, you can choose a candidate color from the 256-color palette, enter a three- or six-digit HEX code, or use the color picker, then check the selected color against white and black. HueRoll does not compare arbitrary pairs of colors or automatically determine WCAG AA or AAA conformance, so the pairwise contrast ratios shown in this article were calculated separately.