How to change the font color in WordPress

Changing font color in WordPress is one of those things that sounds trivial and turns into a 20-minute hunt the first time you try it. The setting lives in different places depending on whether you want to recolor a single word, a whole heading style, every link on the site, or just one paragraph that needs to stand out. Block themes and classic themes expose the controls differently, and the Customizer is missing entirely on a fresh block-theme install. None of it is hard once you know where to look.

This guide covers per-block color in the Gutenberg editor, site-wide color in the Site Editor’s Global Styles, classic-theme color via the Customizer, and the CSS approach that works on any theme when the admin panels do not expose the element you need to recolor. Color is different from font size and font family, and people often conflate the three – if you are trying to change the typeface, how to add custom fonts to WordPress covers that, and how to change the font size in WordPress covers sizing. This one is purely about color.

The short answer#

To change the color of one block (a paragraph, heading, button), click the block, open the Styles panel on the right, find Color, and pick Text to set the text color or Background to set the background color.

For site-wide changes – every paragraph at a different color, all headings dark blue, all links a brand orange – the right panel depends on the theme:

• Block themes (Twenty Twenty-Four and newer, anything with a Site Editor): use Appearance > Editor > Styles > Colors.
• Classic themes: open Appearance > Customize and look for a Colors or Typography panel.
• Any theme: add CSS in Appearance > Customize > Additional CSS (classic) or in a child theme’s stylesheet, which works when the theme does not expose the element you need.

Per-block color in the Gutenberg editor#

The most common color change is for one specific block – a heading you want in brand color, a callout paragraph in red, a button with white text on a dark background. The block editor’s Color panel handles this directly.

Step-by-step

1. Click the block (paragraph, heading, list, group, button, and most other text-containing blocks support color).
2. In the right sidebar, click the Block tab (not Document).
3. Find the Color section. On some themes it is collapsed by default – click to expand.
4. Click Text to open the color picker for the block’s text color, or Background for its background.
5. Pick a preset color from the theme’s palette, or click the Custom color option to enter a hex code, RGB value, or use the eyedropper.
6. The change is visible immediately in the editor and on the front end after you save the post.

The presets are defined by the theme. Two themes showing the same palette swatch may use different actual hex values, so if you want a specific shade, use Custom color and paste in your hex code.

Reset a block to the theme default

Click the three-dot menu next to Color and pick Reset all or Clear. The block returns to the theme’s default colors for that block type. This is useful when you have set a color and decide you actually wanted the theme’s original styling – you do not have to remember what the original color was.

Link color

Link color is its own setting. With a paragraph or list block selected, the Color section shows Text, Background, and Link. Click Link to set the color used for <a> tags inside that block. This only affects links inside the selected block – to change link color site-wide, use Global Styles or CSS.

Site-wide color in block themes#

Recoloring one block at a time is fine for highlights but tedious for a site-wide change. Block themes handle global color through the Site Editor.

Site Editor Global Styles

1. Go to Appearance > Editor.
2. Click the Styles icon in the top-right (two overlapping circles).
3. Click Colors.
4. You will see the theme’s full palette plus options for Text, Background, Link, Heading, Caption, and Button colors.
5. Click any element to open its color picker, or click Palette to edit the theme palette itself.
6. Click Save to apply site-wide.

Changes here propagate to every block that uses the corresponding role. A change to Text affects every paragraph, list item, and caption. A change to Heading affects every H1-H6 unless a specific level has its own override. A change to Link affects every link site-wide.

Per-element overrides

Headings have per-level controls (H1, H2, H3, H4, H5, H6). Click Headings in the Styles panel, then pick the specific level to set its color, weight, and other properties. A common pattern is keeping H1 in a brand color, H2-H4 in a darker neutral, and H5-H6 falling back to the body text color.

Editing the theme palette

Click Palette in the Colors panel to edit the theme’s palette directly. You can rename existing swatches, change their hex values, or add new ones. Custom palette entries become available everywhere a color picker shows the preset swatches – block editor, Global Styles, button blocks. This is the right place to set up brand colors once, then apply them consistently across the site.

The palette lives in theme.json if you are version-controlling your theme. Edit a child theme’s theme.json to define palette colors in code:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "brand-primary",   "color": "#0066cc", "name": "Brand primary" },
        { "slug": "brand-accent",    "color": "#ff6b35", "name": "Brand accent" },
        { "slug": "neutral-dark",    "color": "#1a1a1a", "name": "Neutral dark" },
        { "slug": "neutral-light",   "color": "#f5f5f5", "name": "Neutral light" }
      ]
    }
  }
}

The slug is what WordPress writes into the block’s HTML class ( has-brand-primary-color , has-brand-accent-background-color ), so pick slugs that will not clash with your existing CSS.

Site-wide color in classic themes#

Classic themes do not use theme.json . They use the Customizer (Appearance > Customize) with whatever controls the theme author chose to expose. Most include some color controls under Colors, Typography, or a theme-specific panel like “Theme Options” or “Site Identity”.

Open the Customizer, look for the panel, and make changes with the live preview – what you see updates in the right pane before you commit. Click Publish to apply.

Themes that do not expose color controls (some minimal themes, some old themes) leave you with one option: add CSS.

Color via Additional CSS

The Customizer’s Additional CSS panel is available on every classic theme. CSS rules added here load after the theme stylesheet, which means they win over the theme’s defaults without needing !important .

Body text color:

body {
    color: #1a1a1a;
}

Headings:

h1, h2, h3, h4, h5, h6 {
    color: #002447;
}

h1 {
    color: #ff6b35;
}

Links:

a {
    color: #0066cc;
}

a:hover {
    color: #004999;
}

Specific page area:

.entry-title {
    color: #002447;
}

.widget-title {
    color: #555;
}

.site-footer {
    color: #cccccc;
    background-color: #1a1a1a;
}

How to edit and add custom CSS in WordPress covers the workflow of finding the right CSS selector with browser DevTools before writing overrides, and when to move CSS from the Customizer panel into a child theme stylesheet for larger customizations.

Color contrast and accessibility#

There is a floor on how low contrast can go before body text becomes hard to read. WCAG 2.1 AA, the most commonly required accessibility standard, sets specific contrast ratios:

• Body text against its background: 4.5:1 minimum. Light grey text on white background usually fails this. Mid-grey ( #767676 or darker) on white is the practical floor.
• Large text (18pt+ or 14pt bold+): 3:1 minimum. Headings have more room because they are bigger and easier to read.
• UI elements and graphical objects: 3:1 minimum. Button borders, form field outlines, icons.

Browser DevTools’ color picker includes a contrast ratio readout, and tools like the WebAIM Contrast Checker (webaim.org/resources/contrastchecker) tell you whether a foreground/background combination passes. Always check before locking in a color choice – “looks fine on my monitor” is not the same as “passes WCAG.”

A few related guidelines worth holding to:

• Do not rely on color alone for meaning. A required form field marked only by a red label is invisible to colorblind users. Add an asterisk, a “required” word, or a different shape.
• Test in dark mode if your theme supports it. Some themes flip text and background but not link colors, leaving you with hard-to-see links on a dark background.
• Check on multiple displays. A color that looks rich on a calibrated monitor can look washed out on a cheap laptop screen and oversaturated on a phone.

Color for specific use cases#

Change link color across the entire site

Block theme: Appearance > Editor > Styles > Colors > Link. Classic theme: Customizer > Additional CSS, target a { color: ... } and a:hover { color: ... } .

Make one heading a different color from the rest

Click the heading block in the editor and use the Color panel. The change is per-block – other H2s on the site keep their default color.

Recolor every H2 site-wide

Block theme: Appearance > Editor > Styles > Colors > Headings > H2. Classic theme: CSS, h2 { color: ...; } in Additional CSS.

Different text colors for dark mode

If your theme supports a dark mode toggle, check whether it exposes color controls per mode. If not, use CSS with the prefers-color-scheme media query:

@media (prefers-color-scheme: dark) {
    body {
        color: #e6e6e6;
        background-color: #1a1a1a;
    }
    a {
        color: #66b3ff;
    }
}

Color inside a specific plugin’s output

Inspect the plugin’s output in browser DevTools, grab the specific class or ID, and target that in Additional CSS. Plugins usually use generic-looking classes ( .plugin-name-header , .contact-form-7-input ) that are safe to target without affecting the rest of the site.

Common mistakes#

• Using !important to force a color change. If a theme rule is winning, the problem is selector specificity. Add more specificity ( .entry-content p instead of just p ), or use Additional CSS, which loads last. !important is a flag that says “I did not figure out why my rule was losing.”
• Setting body color but not heading color, then wondering why headings did not change. Heading colors are usually set explicitly by the theme. A change to body { color: ... } does not cascade to h1, h2, h3 if the theme’s stylesheet sets them directly.
• Picking colors that look fine on the desktop and fail contrast checks on mobile. Phone displays vary widely; dim outdoor light makes low-contrast text genuinely unreadable. Always run a contrast check.
• Editing the parent theme’s theme.json or stylesheet. A theme update wipes the changes. Use a child theme.
• Confusing color, size, and family. Three different settings, three different controls. Color is text or background hue; size is how big the text is; family is which typeface is used.
• Setting a color on html instead of body . Most theme CSS targets body for the base text color. Setting html { color: ... } works but mixes with the theme’s body rule in confusing ways. Use body unless you specifically need otherwise.
• Forgetting that link color, link hover, link visited, and link focus are four different states. A site that styles :hover but not :focus is hard to navigate with a keyboard.

Summary#

Font color in WordPress lives in multiple places depending on whether you want a single-block change or a site-wide setting. For one block, use the Color panel in the block editor’s right sidebar – text, background, and link each have their own picker. For everything site-wide on a block theme, use Appearance > Editor > Styles > Colors or define your palette in theme.json in a child theme. On classic themes, check the Customizer for color panels, and fall back to Additional CSS when the theme does not expose what you need. Always check contrast against WCAG 2.1 AA – 4.5:1 for body text, 3:1 for large text – before locking in a choice. Color, size, and family are three separate settings; do not assume that changing one will affect the others.