How to Change the Color of Text in WordPress: The 2026 Guide

Learning how to change the color of text in WordPress takes about thirty seconds with the block editor, but doing it in a way that survives a theme switch takes a little more thought. This guide walks through every method that works in 2026: block settings, global styles, the classic editor, custom CSS, page builders and inline HTML. We’ll also cover the part most tutorials skip, which is picking colors people can actually read.

The Fastest Method: Change Text Color in the Block Editor

If you’re editing a post or page in the standard WordPress editor (Gutenberg), color controls sit in the right-hand sidebar. Select the paragraph or heading block you want to change, then open the Styles tab (the half-filled circle icon at the top of the sidebar).

1. Click anywhere inside the paragraph or heading block.
2. In the sidebar, open Styles, then find the Color panel.
3. Click Text to open the palette.
4. Pick a theme color from your WordPress color palette, or click the custom color circle to enter a hex value like #1F3A93.
5. Update the post and check it on the front end.

The same panel handles background color, and on some blocks, link color. If you don’t see a Color panel at all, your theme has probably disabled it in theme.json, which we cover further down.

Changing Font Color Mid-Sentence

You often want one word colored, not the whole paragraph. Highlight just those words, click the down arrow in the block toolbar, and choose Highlight. That applies an inline text color to the selection only.

This is the block editor’s equivalent of the old HTML trick for changing font color mid-sentence. It writes a <mark> tag with an inline style, which is fine for occasional emphasis but messy if you use it on every third word.

Site-Wide Text Color: Global Styles and the Theme Customizer

Changing one block is easy. Changing the default body text color across 300 posts is where people get stuck, and the answer depends on which kind of theme you run.

Block Themes (Twenty Twenty-Four, Twenty Twenty-Five and similar)

Go to Appearance > Editor > Styles, then click the pencil icon to edit styles. Under Colors, you can set defaults for text, background, links, headings, captions and buttons. Anything you change here applies to the entire site instantly, without touching a single post.

This is the method I’d push almost everyone toward. Global styles live in the database as a single record, so there’s no per-page inline CSS piling up and no cleanup job later.

Classic Themes

Older themes still use Appearance > Customize. Look for a panel named Colors, Typography or Global Settings; the exact label varies by theme. Many commercial classic themes let you set body text color, heading color and link color there, then hit Publish.

If your theme’s customizer offers nothing useful, skip to the CSS method below. It works on every theme ever made.

How to Change the Text Color in the Classic Editor

Sites still running the Classic Editor plugin have a different path. Click the Toolbar Toggle button (the last icon on the first row) to reveal a second row of controls, which includes a Text color dropdown with a small palette and a Custom option.

Select your text, choose a color, and the editor wraps it in a span with an inline style. Roughly 40 percent of the sites we migrate still use the classic editor somewhere, usually inside a legacy page builder, so it’s worth knowing.

We cover this topic in more depth in How to Change SEO on WordPress: The 2026 Step-by-Step Guide.

Related reading: How to Eliminate Render-Blocking Resources in WordPress (2026 Guide).

Change Font Color With CSS (Works Everywhere)

CSS gives you the most control and the cleanest result. Go to Appearance > Customize > Additional CSS, or use your theme’s custom CSS field, and add rules like these:

• Body text: body, p { color: #2B2B2B; }
• All H2 headings: h2 { color: #0B5394; }
• Header text color: .site-title.site-description { color: #FFFFFF; }
• One specific post: .postid-412 p { color: #333; }
• Menu links: .wp-block-navigation a { color: #E8E8E8; }

Use your browser’s inspect tool to find the right class before writing a rule. Right-click the text, choose Inspect, and read the class names attached to the element. Guessing selectors is how you end up with fifteen lines of CSS that do nothing.

A Note on Menu Text Color

Navigation color is theme-dependent, and there are usually two states to handle: the default link and the hover or current-page state. In block themes, select the Navigation block in the site editor and set text color there. In classic themes, target .main-navigation a and .main-navigation a:hover separately.

Changing Font Color in Elementor and Other Builders

Page builders keep their own color settings, and they override theme defaults. In Elementor, select a Text Editor or Heading widget, open the Style tab, and set the Text Color. For site-wide changes, use Site Settings > Global Fonts and Global Colors so you can repaint the whole site from four swatches.

Divi, Beaver Builder and Bricks all follow the same logic: module-level color for one-offs, global presets for everything else. Define your palette once, apply it everywhere, and future you will be grateful.

The Part Most Guides Skip: Contrast and Consistency

Light gray text on white looks elegant in a mockup and fails badly on a phone in daylight. The WCAG 2.2 contrast minimum asks for a ratio of at least 4.5:1 for normal body text and 3:1 for large text (roughly 18.66px bold or 24px regular). Run your hex codes through a contrast checker before you commit.

Three habits keep a site’s colors sane over time:

• Define a palette, not one-off hexes. Four to six colors is plenty for most blogs.
• Avoid per-block overrides for body copy. Inline colors don’t update when you rebrand or switch themes.
• Test on a staging copy first, especially if you’re editing theme.json or a child theme stylesheet.

Teams that manage color tokens in theme.json often keep the file under version control. That’s straightforward on WordPress hosting with Git support, where you can roll back a bad palette commit in seconds instead of hunting through the customizer.

Where Colors Live (and Why They Sometimes Disappear)

Three storage locations explain most “my colors vanished” tickets:

• Inline styles saved inside post content: they survive a theme switch but are painful to bulk edit.
• Global styles saved per theme: switching themes resets them, because each theme has its own record.
• Custom CSS in the customizer: also stored per theme, so copy it out before you switch.

The official WordPress styles documentation covers how theme.json cascades into block settings if you want the underlying model. Once you understand that hierarchy, most color problems solve themselves.

Rendering speed matters here too. Hundreds of inline color declarations bloat your HTML, and on a busy blog that adds up, which is one reason we tune caching and delivery on our WordPress blog hosting plans. Sites with heavy traffic swings benefit even more from scalable WordPress hosting that absorbs the spikes.

Frequently Asked Questions

How do I modify the color of the text?

Select the text or block, then set the color in the editor sidebar under Styles > Color > Text, which takes under 10 seconds per block. For a single word or phrase, highlight it and use the Highlight option in the block toolbar dropdown instead.

How do I change the font color in WordPress menu?

In a block theme, select the Navigation block in Appearance > Editor and set the text color in the Styles panel; in a classic theme, add CSS such as .main-navigation a { color: #FFFFFF; }. Remember to style the hover and current-item states separately, or your menu will look inconsistent.

How do I change the text font on WordPress?

Go to Appearance > Editor > Styles > Typography in a block theme, where you can set fonts for body text, headings and buttons in a few clicks. Block themes since WordPress 6.5 also include a font library for uploading custom families, and our guide to uploading fonts in WordPress walks through that process.

How do I change colors in WordPress?

Set your site-wide palette in Appearance > Editor > Styles > Colors (block themes) or Appearance > Customize > Colors (classic themes), then let individual blocks inherit from it. Defining five or six palette colors once is far more maintainable than picking custom hex values block by block.

Will my text colors survive a theme change?

Colors applied inline to individual blocks survive, but global styles and Additional CSS are stored per theme and will not carry over. Export or copy your CSS before switching, and expect to rebuild global styles in the new theme.

Why is the color option missing from my block editor?

The theme has disabled color controls in its theme.json file, which about one in five block themes does for brand consistency. You can re-enable it in a child theme by setting the relevant color settings to true, or apply colors with custom CSS instead.

Want a Faster Home for Your WordPress Site?

Styling is more fun when the editor loads instantly and staging is one click away. Take a look at our managed WordPress plans, or talk to our team about a free migration, and we’ll handle the move while you keep working on the design. You might also like our guides on changing your website title in Google search results and changing the author on a WordPress post.