A controlled colour palette keeps headings, backgrounds, links and buttons visually consistent. Define a small set of usable combinations and test their contrast before applying them globally.
IN THIS ARTICLE
01 Assign colours to roles
Choose roles such as main text, muted text, page background, accent and action. A brand colour that works as a large decorative area may not be readable as small text on white. Plan light and dark combinations rather than treating every palette colour as interchangeable.
Use more than colour alone to communicate errors, selected states or important distinctions. Text labels and visible structure help visitors who cannot distinguish the colours as intended.
02 Configure the palette and defaults
- Open the Site Editor and review the Styles colour controls supplied by the theme.
- Add or adjust the intended palette choices where supported, using meaningful internal names.
- Set global text, background and link colours deliberately.
- Review block-type defaults for buttons, headings or other elements that need consistent treatment.
- Preview representative components before saving the Styles changes.
03 Test combinations in context
Check paragraphs, links, buttons, menus, form messages and footer content. Include hover and keyboard-focus states where the theme provides them. A link should remain recognisable without depending only on a subtle hue change.
Inspect sections with photographs or gradients separately. A text colour that passes on a solid background may fail over the lightest part of an image. Review mobile crops and overlays as part of the same check.
04 What contrast ratio should I check for text?
For WCAG 2.2 Level AA text contrast, check at least 4.5:1 for ordinary text and 3:1 for qualifying large text. Large text is at least 18pt regular or 14pt bold; a heading label alone does not make small text qualify. Measure the actual foreground and background colours with a contrast checker.
Test the normal and hover/focus combinations, plus text over the lightest relevant part of a photograph or gradient. Meeting these text ratios does not by itself establish that navigation, focus indicators or the entire website meet accessibility requirements.
Why do some sections keep their old colours?
If one block retains an old colour, inspect its local settings and surrounding container. Removing a local override can allow the intended global default to apply. Avoid adding increasingly broad CSS rules before understanding which layer owns the colour.
After saving, review several public templates and clear relevant caches. If the change affects a shared navigation menu or pattern unexpectedly, identify that shared object before editing isolated pages. Keep a record of approved colour pairings so later editors can create new sections that remain readable and consistent without guessing.