How many colors should a website color palette have?

Four to six is a solid range: one primary, one accent, two neutrals (text and background), and one semantic color for errors or warnings. More than that and you spend design time managing exceptions rather than building consistency.

What color contrast ratio do I need for accessible web design?

WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text (at least 18pt, or 14pt bold). Level AAA raises this to 7:1 for normal text and 4.5:1 for large text. Most teams target AA as a baseline.

Should I use pure black and pure white in my palette?

Often not. Many designers find pure black (#000000) on pure white harsh and prefer near-blacks like #111827 or #1a1a1a and off-whites like #f8f8f8. These still pass contrast checks easily and feel slightly softer on the page; just verify the ratio after any change.

How do I choose an accent color for my website?

Pick something that contrasts clearly with your primary brand color and works on both light and dark surfaces. Complementary colors (opposite on the color wheel) create strong distinction. Keep accent usage tight — buttons, links, and key callouts — so it retains its visual weight.

What Makes a Good Color Palette for Web Design

Limit Your Palette Before You Start Designing

It is easy to use too many colors. A typical site needs four to six: a primary brand color, a secondary or accent color, a neutral for text, a light neutral for backgrounds, and one color reserved for alerts or errors. A brand color palette generator can suggest a starting set. Adding more does not create richness — it creates visual noise that makes users work harder to understand the page.

A useful mental model is the 60-30-10 rule. Sixty percent of your UI uses your dominant neutral or background color. Thirty percent uses your primary brand color. Ten percent is the accent — the thing that draws the eye to buttons, links, and key actions. It is a rule of thumb rather than a law, but ignoring the balance entirely often makes a design feel chaotic.

Contrast Is Not Optional — It Is Functional

Color contrast between text and background is not a stylistic preference. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at Level AA. Pale gray text on a white background often fails even the lower bar. It feels modern until someone tries to read it on a phone in daylight.

Check every text-background combination with a contrast checker before locking in your palette. An accessible color pair generator works the other way round: it only outputs pairs that reach at least 4.5:1. If your brand color does not have enough contrast against white for body text, reserve it for decorative elements and use a darker shade for actual type.

Color vision deficiency affects up to about 8% of men and 0.5% of women of Northern European descent, with lower rates in some other populations. Never use color as the sole indicator of meaning — a red error state also needs an icon or text label. Running your palette through a color blindness simulation early saves refactoring later.

Build a Tint and Shade Scale, Not Just One Hex Code

Picking a single hex code per color is where most people stop, but a production design needs a full scale. You need a light tint for hover states and backgrounds, your core value, and a dark shade for pressed states and borders. Frameworks like Tailwind use a 50–950 scale for exactly this reason.

In practice, three to five steps per color is enough for most sites. Generate them from your base color with a tints and shades generator. The goal is that your brand blue at 500 is your primary action color, 100 is a background wash, and 700 is the hover state on a button. Everything feels related because it is.

Test Your Palette in Context, Not in Isolation

Swatches look different next to each other than they do alone. A warm cream background can make a neutral gray look cool. A bright accent can look muted beside a competing saturated color. Always test your palette on actual UI components — a card, a hero section, a form — before committing. Random sets from a color palette generator are good for exploring, not a finished palette.

Also test in dark mode if your site supports it. A palette built only for light backgrounds often falls apart when inverted. Check that your primary brand color still reads clearly on dark surfaces and that your neutrals have a genuine dark equivalent ready. Our post on UI color palettes for accessibility covers these checks in more depth.

Frequently asked questions

How many colors should a website color palette have?: Four to six is a solid range: one primary, one accent, two neutrals (text and background), and one semantic color for errors or warnings. More than that and you spend design time managing exceptions rather than building consistency.
What color contrast ratio do I need for accessible web design?: WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text (at least 18pt, or 14pt bold). Level AAA raises this to 7:1 for normal text and 4.5:1 for large text. Most teams target AA as a baseline.
Should I use pure black and pure white in my palette?: Often not. Many designers find pure black (#000000) on pure white harsh and prefer near-blacks like #111827 or #1a1a1a and off-whites like #f8f8f8. These still pass contrast checks easily and feel slightly softer on the page; just verify the ratio after any change.
How do I choose an accent color for my website?: Pick something that contrasts clearly with your primary brand color and works on both light and dark surfaces. Complementary colors (opposite on the color wheel) create strong distinction. Keep accent usage tight — buttons, links, and key callouts — so it retains its visual weight.

Sources

Understanding SC 1.4.3 Contrast (Minimum) (Level AA) — W3C
Understanding SC 1.4.6 Contrast (Enhanced) (Level AAA) — W3C
Colour vision deficiency — PubMed (National Library of Medicine)
Default color palette — Tailwind CSS