Website Color Schemes That Work: Five Palettes With the Contrast Ratio Worked Out for Every Pair

Key takeaways

• A scheme has to pass two tests, taste and contrast. The W3C asks for at least 4.5:1 for normal text and 3:1 for large text, so a palette that looks right but misses those numbers will be hard to read for many visitors.
• Bright accents fail more often than neutrals. The fix was usually to darken one color or switch a label from white to near-black, not to change the scheme.
• Light grey text is the most common failure. Grey #9CA3AF on white scores 2.54:1, and grey #6B7280 on white scores 4.83:1. One step in the hex code is the difference between fail and pass.
• Dark themes need the same check. Slate #64748B on a #0F172A background scores 3.75:1, which is too low for body text, while #94A3B8 on the same background scores 6.96:1.
• Compute the pairs before you build. Changing a color later means touching every page.
• Color should never carry meaning alone. The W3C's Use of Color criterion asks for a second signal, such as an icon or text, next to any color cue.

How contrast is measured

Contrast ratio is a number from 1:1 (no difference) to 21:1 (black on white). It compares how bright two colors are, not how different they look. The W3C's page on the Contrast (Minimum) criterion, read on 1 November 2026, gives the formula: add 0.05 to the relative luminance of the lighter color, add 0.05 to the darker one, and divide. Relative luminance weights the red, green and blue channels at 0.2126, 0.7152 and 0.0722, after each channel is converted from the screen value to a linear value.

Every ratio in this post was computed with a short script that follows the W3C formula exactly, and you can check any pair yourself with our colour contrast checker. The thresholds come from three W3C pages, all read on 1 November 2026:

The W3C says the thresholds are not rounded, so 4.499:1 does not meet 4.5:1. It converts large text to about 24 pixels regular or 18.5 pixels bold. Below those sizes, use 4.5:1.

What the usual color scheme guides give you

We read two of the pages that rank for this topic on 1 November 2026. Kinsta's guide lists example sites and gives hex codes for its own scheme: a dark purple #5333ed, a turquoise #2cd4d9 and a grey #6E7076 for text. It gives no contrast ratios, and its accessibility advice is about color blindness. Website Setup's guide lists 51 schemes, states the 4.5:1 and 3:1 thresholds and suggests a 60-30-10 split between dominant, secondary and accent colors.

Neither shows a ratio for its colors, so we computed the three Kinsta colors against white:

The turquoise suits a gradient or a large shape and is a poor text color. A palette is a set of roles, and each color is right for only some of them.

Five palettes, scored by role

The hex codes are our own starting points, not a copy of any brand. Each ratio is computed for the exact pair named.

1. Clear blue, for services and software

Every pair clears 4.5:1. This is the easiest scheme to keep accessible, which is why so many business sites look like it.

2. Warm terracotta, for studios and boutique brands

The lighter terracotta looks livelier and fails as text. Darkening it to #A6402B keeps the warmth and passes.

3. Forest green, for health, food and outdoor brands

White on the bright green is only 2.28:1. Use the deep green with a white label, or keep the bright green with a near-black label.

4. Dark slate, for tech and tools

Mid-tone greys that look refined on a dark page often sit under 4.5:1. Keep the dimmer slate for borders, not sentences.

5. Black and gold, for premium services

Gold works on black and fails on white. For a light section, use a darker gold such as #8A6D0B on cream #FFFBEB, which scores 4.74:1.

The failures to look for first

The same few problems repeat. Each row shows the ratio and the smallest fix.

Yellow, light green, orange and pale teal work as backgrounds with dark text and fail as text on white. A pale field border looks tidy and, at 1.47:1, fails the 3:1 test for controls.

How to build your own scheme in order

1. Start from what exists. Take the logo's main color as the accent candidate and compute it on white and on your darkest neutral.
2. Choose the text and background first. A near-black on white or off-white is easy to read for long stretches.
3. Add one accent. Use it for links and buttons only. If it fails as text, make a darker version for text and keep the bright one for large shapes.
4. Add a muted text color. It should still pass 4.5:1, since it carries real words such as captions and form hints.
5. Add a border color for controls. It needs 3:1 against the page color so fields and checkboxes can be seen.
6. Check the states. Score hover, focus and visited versions too.
7. Test with the real layout. Put the colors on the actual hero, a form and a footer, as the Website Setup guide advises.
8. Write the pairs down. Keep a short list of approved pairs, so the next editor does not invent a new grey.

For the layout those colors sit in, see our guides to hero section design, call to action examples and homepage design ideas.

When color alone is not enough

The W3C's Use of Color page, read on 1 November 2026, sets a Level A rule: color must not be the only way to show information or tell elements apart. Its example is a required field marked in red that also carries an icon. So give error messages words, and underline links inside paragraphs.

Keep your current colors if, and when this does not apply

Keep what you have if your brand colors already pass the pairs you use. Often the fix is a darker text variant, as with the terracotta above, while the original stays in the logo and large shapes.

This post does not say which hue makes people buy. That is taste and audience, while contrast is a measurable minimum. Passing ratios also do not replace a full accessibility audit, and a pair that passes can still be hard to read over a photograph or in thin type, so test it where it sits. Legal duties differ by country, so this is not legal advice. Read the W3C pages linked above and your local regulator.

How we help at Amariq

A palette is cheapest to fix on paper. When we design a site on Webflow, Framer, WordPress or Shopify, or on Wix, Squarespace or a custom build, we turn the agreed colors into a short table of approved pairs before the first section is laid out and check each against the ratios above. The pairs then go into the style settings, so a button cannot drift off palette when someone edits later.

Our work is priced from scope, not by the hour. If you want your colors reviewed, see our web design and UI/UX service or the website optimisation page. Related reading: website conversion optimization and how to build a high-converting website.

Frequently asked questions

What contrast ratio should a website have?

The W3C asks for at least 4.5:1 for normal text and 3:1 for large text at Level AA, read on 1 November 2026. Large text means 18 point, or 14 point bold. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text.

How many colors should a website color scheme have?

Kinsta's guide suggests three to seven colors. In practice, one dominant neutral pair for text and background, one accent and one border color is enough for most business sites. Extra colors are worth adding only when each one has a clear job, such as success and error states.

What is the 60-30-10 rule for website colors?

It is a proportion guide that Website Setup suggests: about 60% dominant color, 30% secondary and 10% accent. It describes how much of the page each color covers. It does not check readability, so score the pairs separately.

Is white text on a colored button always safe?

No. White on #2563EB scores 5.17:1 and passes, while white on orange #F97316 scores 2.80:1 and fails. Compute the pair, and if it fails, either darken the button color or switch to a dark label.

Do dark mode color schemes need the same ratios?

Yes. The same thresholds apply to light text on a dark page. Muted greys are where dark pages most often fall short, as #64748B on #0F172A shows at 3.75:1. Check the dimmer text colors, not only the main body color.

How do I check a color scheme quickly?

Enter the two hex codes of each text and background pair in the contrast checker linked earlier and compare the result with 4.5:1 for text or 3:1 for large text and controls.