Three colors are enough to establish a visual direction for many small sites. The challenge is assigning them useful roles. A palette board can make a pale blue look beautiful while the same blue is unreadable as a link on white. Build the page sample first.
Start with a working example
This example uses white (#FFFFFF) for the background, near-black (#111827) for text, and blue (#1D4ED8) for links and primary actions. Using the WCAG contrast formula, the near-black/white pair is about 17.74:1 and the blue/white pair about 6.70:1. Both exceed the 4.5:1 Level AA minimum for normal text. Those figures apply to these exact hex pairs, not to every shade of blue or every overlay.
| Role | Example | Use |
|---|---|---|
| Background | #FFFFFF | Main reading surface and button text |
| Text | #111827 | Paragraphs, headings, and labels |
| Action | #1D4ED8 | Links and primary button fill |
Apply the colors to actual components
- Paragraph: Use the text color on the page background. Read a full paragraph, not a single specimen line.
- Link: Use the action color on white and give links a non-color cue such as an underline in body copy.
- Button: Put white text on the action color. Check the label, border, hover, and keyboard focus state in the live theme.
- Card: Start with the same background and use spacing or a border to separate it. Add a tint only if it has a job.
Do not turn “three colors” into a ban on required states. Errors, warnings, success messages, and disabled controls may need their own colors and text labels. Their meaning should remain clear to people who cannot distinguish the hues.
Adapt the palette without losing the roles
If your brand has a yellow accent that fails as a text link on white, keep it for a larger surface or illustration and choose a darker action color for text. If you use a photograph behind a heading, measure the text against the part of the image it actually covers or add a stable overlay. The color pair that passed on a plain background does not automatically pass over a photo.
In WordPress, set the approved colors in the theme’s global styles when that feature is available, then preview a long article and the homepage. Check both desktop and phone widths. The palette is finished when its roles still make sense across the site’s real content, not when its swatches look harmonious.
