Color Scheme Rules for Changing Background Colors Between Website Sections

Changing background colors between website sections can make a long page easier to follow. But assigning a new color to every heading can produce a striped layout, leaving visitors unsure which details belong together. Instead of alternating colors simply for variety, change the background when the subject or the action expected of the visitor changes. This article uses a hypothetical community workshop about reusing wood to demonstrate how to organize an event page through larger, meaningful groups of content.

Switch section backgrounds when the information changes purpose

Start by grouping the page into an event introduction, essential event details, materials and making steps, venue and safety information, and registration. Even if the making process includes three different steps, those steps can share a single section background because they all explain the same activity. Registration, by contrast, marks a different task. A modest change of background there can help visitors recognize that they are moving from reading instructions to taking action.

A section is an area of a page that groups related content, such as a heading and the paragraphs beneath it. When choosing section colors, consider the text, headings, cards, and buttons that sit on each surface, not just how different neighboring rectangles look. A contrast ratio expresses the difference in relative luminance between two colors. When adjacent pale backgrounds are similar, headings, spacing, and a deliberate layout can help define the groups without adding more colors.

Do not make the background change the only indication of what a section means. Clear headings such as “Choose materials,” “Find the venue,” and “Register” let visitors follow the page even when the color difference between its sections is small.

Example palette for a reclaimed-wood workshop event page

Imagine an event in which participants reuse wood from old boxes to make small household objects. HEX is the hexadecimal notation used to specify a color on the web. The page moves from a dark introduction to light event details, a shared pale process section, practical instructions, and a warm registration area.

• Event introduction: Use deep green ■#31584D as a short opening background with white ■#FFFFFF heading text. The text-to-background contrast ratio is about 7.97:1. Keep the dark surface for introducing the event instead of extending it through every part of the page.
• Event overview and eligibility: Display the date, location, age guidance, and other facts in charcoal ■#2C3C38 on warm off-white ■#F9F7F2. Text contrast is approximately 10.83:1. Keep these details in a consistent reading area rather than giving every fact its own colored stripe.
• Headings used across sections: Deep teal-green ■#2A594D headings contrast about 7.45:1 on off-white ■#F9F7F2 and 6.80:1 on the pale sage ■#E7EFE9 used for the next group. Reusing a readable heading color helps the page feel connected even when the section backgrounds change.
• Materials and making process: Put both topics on one continuous pale sage ■#E7EFE9 background. Charcoal ■#2C3C38 body text contrasts by approximately 9.90:1. Sage differs from the preceding off-white ■#F9F7F2 by only about 1.09:1, so separate “Materials” and “How the workshop works” through headings and spacing instead of introducing another surface color.
• Step-by-step cards: Use white ■#FFFFFF cards with charcoal ■#2C3C38 descriptions for about 11.60:1 text contrast. The white cards and surrounding sage ■#E7EFE9 differ by only about 1.17:1. Where a visible card outline is needed, use gray-green ■#73867D, which contrasts about 3.86:1 with white ■#FFFFFF and 3.30:1 with sage ■#E7EFE9.
• Venue details and items to bring: After the making instructions, return to off-white ■#F9F7F2. Use the same charcoal ■#2C3C38 text for directions and packing information, maintaining approximately 10.83:1 contrast. This return to the base surface supports the shift from the making process to practical arrangements.
• A small safety notice: For a reminder such as “Bring work gloves,” use a compact pale sand ■#F2E4CE panel with dark brown ■#574432 lettering. The text contrasts by about 7.36:1. Sand differs from the surrounding off-white ■#F9F7F2 by only about 1.17:1, so include a clear heading such as “Safety reminder” rather than relying on the tint alone.
• Registration section: Give the final section a warm beige ■#F5E9DA background with charcoal ■#2C3C38 explanatory text and deep teal-green ■#2A594D headings. Text contrast is about 9.69:1 and heading contrast about 6.66:1. Beige differs from the preceding off-white ■#F9F7F2 by only about 1.12:1; use generous spacing and an explicit “Registration” heading to establish the transition.
• “Register for the workshop” button: On the beige registration surface, use deep terracotta ■#8D452F with white ■#FFFFFF button text. The text-to-button contrast ratio is about 6.94:1, and the button contrasts about 5.80:1 with beige ■#F5E9DA. For keyboard focus, a deep green ■#31584D outline contrasts about 6.66:1 with the beige ■#F5E9DA surface. Make the focus indicator clearly visible, not just a subtle color change.
• Decorative lines and supporting text: A soft gray-green ■#C8D6CF line against sage ■#E7EFE9 has only about 1.28:1 contrast. Use such lines only as decoration where headings and spacing already establish the structure, not as the sole outline of an important input field. Supporting text in muted green-gray ■#53645E against off-white ■#F9F7F2 has approximately 5.85:1 text contrast.

The backgrounds change when the visitor’s purpose changes, not whenever the page gains another small heading. Keeping the materials and instructions on one shared surface prevents the layout from becoming a stack of unrelated color bands.

Review section boundaries and button placement in the final layout

Two neighboring pale surfaces can have a contrast ratio close to 1:1 without automatically making a website inaccessible. The important question is whether headings, spacing, and content organization communicate the section boundaries without depending on the background tint alone. By contrast, outlines or visual states essential for identifying an interactive control need adequate contrast against their actual adjacent colors.

Moving the terracotta registration button ■#8D452F onto the deep green opening section ■#31584D would provide only about 1.15:1 contrast between the button surface and its surroundings. A button color chosen for the light registration area should not automatically be reused on a dark section.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text generally requires at least 4.5:1 contrast against its background and large text at least 3:1. Essential non-text visual information needed to identify controls or states generally requires at least 3:1 against adjacent colors. That does not impose the same threshold on every decorative divider or change in section background.

On a smartphone, each colored section may occupy much more vertical space. Check the heading positions, spacing, cards, and the route to registration in the narrow layout. HueRoll can suggest related colors and compare a selected color against white or black, but it cannot directly compare arbitrary pairs of custom colors or automatically assess WCAG AA or AAA compliance. The custom-pair ratios in this example were calculated separately.