How to choose colors for a website

A simple five-colour method for website palettes (background, surface, text, accent, highlight) and how to check contrast so everyone can read it.

The short answer

Choose five colours with jobs: a background, a surface for cards, a text colour, one accent for actions and one highlight. Keep the accent for buttons and links only, and check that text passes WCAG contrast (4.5:1 for body text).

01The five-colour method

Background: the page itself, usually near-white or near-black.
Surface: cards and panels, slightly different from the background.
Text: dark on light or light on dark, never pure grey on grey.
Accent: one colour for every action, so actions are easy to find.
Highlight: a second colour used sparingly, for status or emphasis.

02Check the contrast

Text needs enough contrast with its background for people with low vision to read it. WCAG AA asks for 4.5:1 for body text and 3:1 for large text. Pale grey text on white is the most common failure.

Where Orlume fits

Orlume chooses a palette for your brief in its design pass. To explore palettes yourself, browse the free website colour palettes, each with computed contrast scores.

Free to start · No card required · Live in one click

Written by the Orlume team · Updated October 2026

Keep reading

Questions

Questions, answered.

The things people ask before they start building.

Start building See pricing

How many colours should a website have?

Five covers almost every site: background, surface, text, one accent and one highlight.

What contrast ratio does website text need?

WCAG AA requires 4.5:1 for body text and 3:1 for large text.

Still stuck? Email us

Build something that doesn't look AI-made.

Describe the site you want. Watch it get designed, not just generated. Then publish it to its own orlume.site address.

Free to start
No card required
Publish to a live URL
You own the code