A palette with five jobs
| Role | Job | Typical choice |
|---|---|---|
| Primary | Carries the brand | Your main logo color |
| Accent | Marks buttons and links | One strong color used only for action |
| Dark neutral | Body text and headings | Near-black or deep navy |
| Light neutral | Backgrounds and cards | White or a soft tint |
| Feedback | Errors and success messages | A red and a green that pass contrast |
Five roles cover almost every business site. More colors make pages busier, not better.
Contrast is not optional
WCAG asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. Buttons and form borders need at least 3 to 1 against their background. Light gray text on white and white text on pale yellow fail these checks most often. Test every pair in a contrast checker like WebAIM's before you commit.
Never let color carry meaning alone. WCAG notes that some people cannot tell red from green. Pair the color with text or an icon, like a red border plus an error message.
Choosing colors that fit the brand
- Look at what your competitors use, then stand apart.
- Pick an accent that contrasts with your primary color.
- Test the palette on real photos of your work.
- Check it on a phone in bright daylight.
Good example. A pool service uses deep blue for the brand, white backgrounds, navy text and one bright orange for every booking button. Visitors always know what to tap.
Bad example. The same company uses six shades of blue, puts pale blue text on white and makes buttons the same color as headings.
Use the palette with discipline
Use the accent only for actions, so buttons always stand out. Keep the primary for headers and brand moments. Read the 60/30/10 rule for one way to balance them.
Our web design team builds every palette as tokens in the code and checks contrast before designing any page.