How to Choose Website Colors: Roles, Balance and Contrast

Picking five colors you like is the easy part. The hard part is deciding which one goes on the page background, which one becomes the button, which one the links use, and what happens when a form shows an error. A website doesn't need a palette so much as a set of jobs, with one color assigned to each.

This guide starts where palette building ends. If you don't have a palette yet, our guide How to Create a Beautiful Color Palette walks through choosing a base color, a harmony and neutrals. Here we take a finished palette and put it to work on a real page.

Think in roles, not swatches

Every website, from a one-page portfolio to a large store, uses the same handful of color roles. Name them before you assign anything, because a role tells you what the color must do and which contrast rule it has to meet.

• Background: the page itself. Usually white, an off-white or, on a dark site, a deep near-black.
• Surface: cards, panels, menus and the footer, a step lighter or darker than the background so they read as separate areas.
• Text: a primary text color for headings and body copy, plus a muted one for captions, dates and helper text.
• Primary action: the main button and anything else that says do this. It's the color people learn to look for.
• Links: often the primary color or a deeper version of it, so links read as clickable without competing with buttons.
• Borders and dividers: hairlines that separate content, and stronger outlines for inputs that people need to find.
• States: hover, focus, selected and disabled, plus feedback colors for success, warning and error.

An example: mapping a palette to roles

Here is a simple product palette with every color given a job. It's a typical blue and slate scheme with one warm accent.

• Background #FFFFFF and surface #F8FAFC: the cards sit just off the white page.
• Text #0F172A: 17.85:1 on white and 17.06:1 on the surface.
• Muted text #475569: 7.57:1 on white and 7.24:1 on the surface, so captions stay comfortably readable.
• Primary button #2563EB with white text: 5.16:1, which passes AA for normal text.
• Links #1D4ED8: 6.70:1 on white and 6.40:1 on the surface. Slightly deeper than the button, so a link in a paragraph doesn't look like a button.
• Divider #E2E8F0: only 1.23:1 on white, which is fine for decorative lines but not for input borders.
• Input borders #64748B: 4.75:1 on white, above the 3:1 that WCAG asks for in controls people need to see.
• Accent #F97316: used for a badge or highlight with navy text (6.36:1). White text on it is only 2.80:1, so it never carries white labels.

Feedback colors sit outside the main palette but follow the same rules. In this scheme an error red of #B91C1C reaches 6.47:1 on white and a success green of #15803D reaches 5.01:1, so both work for message text. Pair them with an icon or a word as well, since color alone shouldn't carry the meaning.

Applying it to a real page

With the roles decided, each part of the page follows almost automatically. Walk through the page from top to bottom.

Navigation

Keep the header calm: background or surface color, text color for the menu items, and the primary color reserved for one sign up or get started button. Show the current page with weight, an underline or a small marker, not only a change of hue.

Hero

The hero is where most sites spend their boldest color. You can fill it with the primary color and set white text on top, or keep it light and let one large button and an illustration carry the color. If you put text over a photo, add a dark or light overlay so the contrast doesn't change across the image.

Buttons

Have one filled primary button style and a quieter secondary style, such as an outline or a tinted background. When every button is filled with the brand color, people can't tell which one matters. Check the label against the fill, and the fill or border against the page at 3:1, so the button still looks like a button.

Cards and sections

Cards use the surface color, a subtle border or a soft shadow. Alternate section backgrounds between the background and surface colors to break a long page into chunks without adding new colors. Keep body text in cards the same color as on the page so the reading experience doesn't shift.

Footer and forms

A dark footer in the text color, with light text, closes a light page neatly. Forms need the most care: visible input borders, a clear focus ring, error text in the feedback red with an icon, and placeholder text that isn't the only hint about what to type.

Balancing the amounts with 60-30-10

The 60-30-10 rule of thumb from palette building translates directly into website roles. Roughly 60% of the screen is background and surface, about 30% is text, dark sections and secondary areas, and about 10% is the primary color and accent. On most websites the neutral share is even larger than 60%, and that's normal: the less space the brand color takes, the more it draws the eye to the actions that matter.

A quick test is to squint at a screenshot. You should see a mostly calm page with the primary button and maybe one accent popping out. If everything pops, reduce the number of filled colored areas.

Check contrast as you assign roles

Each role has a contrast target, so check pairs as you go rather than at the end. Body text and button labels need at least 4.5:1 against what's behind them. Large headings need 3:1. Input borders, icons without labels and focus indicators need 3:1 against their surroundings. Our guide Color Contrast and WCAG explains these levels in detail.

• Check text on every surface it appears on, not only on white. Muted text that passes on the page can fail on a gray card.
• Check links against body text as well as the background, and underline links in paragraphs.
• Check hover and focus states, which are often lighter or darker than the default.
• Check feedback colors as text, not just as icons.

Three example website palettes

Different sites need different balances. These three show a warm light site, a dark site and the product palette above, each with its key pairs checked.

On a dark site, the bright primary usually takes dark text rather than white. In Studio Dark, the near-black background color on a sky blue button gives 8.78:1. Avoid pure white text on pure black for long reading; a soft light gray on a deep navy is easier on the eyes.

Preview it before you build

Swatches don't show you how much space each color will take. The Palette Visualizer places your palette on a website screen, a mobile app and a landing page mockup, so you can see whether the primary color is too loud in the hero or whether the cards disappear into the background.

If you're not sure where to start, look at how other sites balance their colors. The Inspiration section collects curated website examples you can browse by category and mood, each with its palette.

Common mistakes

• Using the brand color for everything, so the primary button doesn't stand out.
• Light gray body or helper text that looks elegant in a mockup and fails contrast on the real page.
• Input borders so faint that people can't find the field.
• White text on a bright accent such as orange, yellow or light green.
• Links that look exactly like body text, or exactly like buttons.
• Designing only the light theme and leaving dark mode to chance.

Quick checklist

1. Every color in the palette has a named role.
2. One color is clearly the primary action, and it isn't used for decoration.
3. Neutrals cover most of the page.
4. Text, links and button labels reach 4.5:1 on every surface they sit on.
5. Input borders, icons and focus rings reach 3:1.
6. Feedback messages use an icon or word as well as color.
7. You've seen the palette on a full page, not just as swatches.