How to change site-wide colors in WordPress

A palette defines colors you can select. A default tells WordPress where to use a color. You can add a palette color without changing your page background or text.

Update global colors in a block theme

1. Open Appearance → Editor → Styles → Colors.
2. Inspect the current palette. Record the colors you are replacing, particularly the background, text and link colors.
3. Change the default color for the relevant element, such as Background, Text, Links, Headings or Buttons. Options vary with the theme and element.
4. Use Palette when you need to change or add reusable choices for blocks. Give new colors names that explain their role.
5. Preview several pages and select Save. Review the changed items before saving.

Change the background and its text together. A dark background with a dark text default can make whole sections unreadable.

Preserve useful contrast

Use a contrast checker on your actual text and background pairs. WCAG's normal-text minimum contrast is 4.5:1, with 3:1 for large text; meeting a contrast ratio is only one part of an accessible page. The W3C contrast guidance explains these criteria.

Test links within paragraphs. Give visitors a way to recognize links beyond color alone, such as an underline. Check buttons in normal, hover and keyboard-focus states. The focus outline must remain visible against adjacent colors.

Photographs and gradients have varying backgrounds. Use a solid panel behind important text when contrast cannot be maintained across the image.

If some blocks do not change

Select the block and check its own Color settings. A local color overrides an inherited default. Reset that local choice when the block should follow the new site-wide color.

A copied pattern can include explicit colors. RoarWP patterns deliberately expose those choices in block settings. Change the pattern's outer Group and its button or heading blocks as needed; switching the global palette does not guarantee that a hardcoded custom color changes.

Use Styles → Blocks when the desired change concerns every instance of a particular block type. Preview the result before saving because that choice can affect unrelated pages.

Classic themes and recovery

For a classic theme, inspect Appearance → Customize and the theme's documented color controls. Some themes expose only a few color settings. Avoid adding CSS overrides until you understand which theme rule controls the element.

For an unsaved edit, use Undo. The Styles panel's Reset to defaults restores theme defaults and can remove other style customizations too. Save a backup before using it, and use the template and Styles guide to distinguish style resets from template resets.

Finish by checking the homepage, a post, search results and the mobile menu. Global colors need to work in all of those contexts.