Section backgrounds that give a homepage rhythm

Key takeaways

A homepage section background shows visitors where one idea ends and the next begins. Alternate between two or three calm tones, save your strongest colour for the section that matters most, and always check contrast. Done well, this rhythm makes a long page easier to scan, without adding any extra words.

• Use two or three background tones, not more.
• Save the strongest colour for your main action.
• Check contrast of text on every background.
• Use space alone if the page is short.

Why change backgrounds between sections?

Changing backgrounds groups content visually, so a scanning visitor can see the page's structure without reading it. It also gives the eye small resting points on long pages. On a phone, where sections stack in one column, these changes can be the clearest sign that a new topic has started.

• How to create a high-converting homepage for an SME
• Visual hierarchy: guide the eye to the next step
• How visitors read a homepage: scanning, not reading

How many background colours should you use?

Two or three is usually enough: white or off-white, one soft tint and one strong brand colour. More than that starts to look like a patchwork. Nielsen Norman Group advises using colour deliberately and sparingly, since it loses its power to direct attention when everything is colourful.

• Choosing a website colour scheme: mistakes to avoid

Where should the strongest colour go?

Save it for the section with the most commercial value, usually your closing action or a key proof point. If every section is loud, none of them stands out. Using one strong band near the end of the page gives visitors a clear visual signal that this is where to act.

• The last section of a homepage: how to close the page
• Button design: why visitors miss your website buttons

What about contrast?

Check text on each background against WCAG 2.2, which requires 4.5:1 for normal text and 3:1 for large text. Pay attention to tinted backgrounds, muted greys and text on brand colours. WebAIM's annual analysis repeatedly finds low-contrast text to be among the most common accessibility failures on home pages.

• Colour contrast on websites: why grey text loses readers
• Homepage accessibility problems that cost customers

When are coloured bands unnecessary?

They are unnecessary on short pages, where plenty of white space does the same job. They may also feel heavy on a premium or minimal brand. If your page already has strong images or a clear heading rhythm, try using spacing alone, and add colour only if the structure seems unclear.

• Minimalist website design: credible or just empty?
• White space in web design: why empty space sells

What does this look like in practice?

A pattern we see on template sites: each section has a different colour taken from the theme's demo, none of them meaningful. Reducing this to white, one tint and one strong band usually makes the page feel more considered, and it makes the closing call to action far easier to spot.

• See client work
• Website Design & Development for UK businesses

Homepage backgrounds checklist

• Choose two or three tones.
• Alternate them with purpose.
• Reserve the strongest for your key section.
• Check text contrast on each background.
• Check that links and buttons stay visible.
• Avoid text over busy images.

• A homepage grid layout that keeps sections tidy
• Mock up a homepage in Canva or Figma

Next step

Zoom your browser out to 25% and look at your page. You should be able to see where the sections begin and which one matters most.