How to Change Text Color in WordPress
Last updated: July 2026
Every WordPress site owner eventually wants to make a heading pop, dim a caption, or match body text to a brand palette. Learning how to change text color in WordPress is one of the first styling skills worth picking up, and the good news is you rarely need to touch a line of code to do it. This guide walks through every practical method, from the built in block editor tools to Customizer settings and custom CSS, so you can pick whichever fits your theme and comfort level.
Quick Answer
Select the text or block you want to change, open the block settings panel on the right, expand the Color section, and pick a color from the swatches or enter a hex code. For colors that should apply across the whole site, such as all paragraph text or all links, use Appearance then Customize or the Site Editor’s Styles panel instead of editing block by block.
Prerequisites
- Admin or Editor access to your WordPress dashboard
- A theme that supports the block editor’s color controls (most 2020 and later default themes do)
- A hex code or brand color reference if you want an exact match rather than a preset swatch
- FTP or a code snippet plugin only if you plan to use the custom CSS method
Step 1: Change Text Color Using the Block Editor
The block editor, also called Gutenberg, is the fastest way to change text color in wordpress for a specific paragraph, heading, or list.
Select the block
Click into the paragraph or heading you want to style. A toolbar appears above the block and a settings panel opens on the right side of the screen. The official WordPress block editor documentation covers the full range of block settings if you want a deeper reference.
Open the color settings
In the right hand panel, look for a section labeled Color or Text. Click it to expand the swatches. If you do not see this panel, click the small gear icon in the top right corner of the editor to reveal block settings.
Pick or enter a color
Choose one of the theme’s preset swatches, or click the custom color option and type in a hex value such as #1a73e8. The change previews instantly in the editor.
Step 2: Change Text Color Site-Wide with the Customizer or Site Editor
If you want every paragraph or every heading on your site to use a new color, editing block by block is not efficient. Instead, go to Appearance and choose Customize on classic themes, or Editor and then Styles on block based themes.
Classic themes: Additional CSS
Inside the Customizer, look for a Colors panel first, since many themes expose body text and link color controls there directly. If your theme does not offer that, scroll to Additional CSS and add a rule targeting the element you want to change, for example the main content area.
Block themes: global Styles
Block based themes let you set typography colors globally through the Styles panel in the Site Editor, including separate controls for text, background, and links, without writing any CSS at all.
Step 3: Use Custom CSS for Full Control
For precise targeting, such as changing the color of text inside a specific widget or a particular class, custom CSS gives the most control. Add your rule through Appearance then Customize then Additional CSS, or through a lightweight custom CSS plugin if your theme lacks that option. A simple rule looks like p { color: #333333; } for body paragraphs, or a more specific selector if you only want to target one section.
Step 4: Changing Text Color with a Page Builder
If your site was built with a page builder plugin rather than pure block editor content, look for a Typography or Style tab on the element you are editing. These tools typically include their own color picker that overrides theme defaults for that specific element only, which is useful for landing pages that need to break from the site-wide palette.
For a broader look at how CSS color properties work under the hood, the MDN Web Docs CSS color reference is a reliable technical resource.
Troubleshooting
- The color is not changing: Your theme’s CSS may have a more specific rule overriding your new color. Try adding
!importantto your custom CSS rule as a temporary test, then find a more specific selector as a permanent fix. - Changes disappear after a theme update: Custom CSS added directly to theme files gets wiped on update. Always use Additional CSS in the Customizer or a child theme instead of editing core theme files.
- Colors look different on mobile: Some themes apply different styles at smaller breakpoints. Check your CSS for media queries that might be resetting the color on narrow screens.
- Cache is showing the old color: Clear your caching plugin and browser cache after making changes, since both can serve a stale stylesheet.
[IMAGE: alt text showing the WordPress block editor color picker panel open, related to change text color in wordpress]
At Canada Create, we walk small business clients through exactly this kind of styling work when we hand off a finished WordPress build, since a few color tweaks often make the difference between a site that feels generic and one that feels on-brand. If your store also needs deeper customization, our guide on multi currency plugins for WordPress stores covers another common post-launch request. For businesses weighing platforms entirely, our breakdown of Wix versus WordPress is a useful starting point before you invest time in styling.
Why Text Color Choices Matter for Readability and Branding
Text color is not purely decorative. Poor contrast between text and background hurts readability and can create accessibility problems for visitors with low vision. Canada Create readers often ask us to double check contrast ratios during a site audit, since a color that looks fine on a designer’s monitor can fail basic accessibility guidelines on other screens. As a rule of thumb, aim for a contrast ratio of at least 4.5:1 between text and its background, a threshold defined in the W3C Web Content Accessibility Guidelines, which most online contrast checkers can confirm in seconds.
Brand consistency is the other reason this matters. A Toronto small business rebranding for 2026 might want every heading to match a new logo color exactly, which is why the hex code method beats picking the “closest” preset swatch. We cover this kind of consistency work in our piece on why WordPress remains a strong CMS choice for businesses that expect to keep refining their design over time.
Working with Themes That Limit Color Options
Some budget themes intentionally limit customization to keep the design consistent, which can be frustrating if you need a specific brand color. In these cases, the Additional CSS approach in Step 3 is usually the most reliable workaround, since it applies after the theme’s own stylesheet loads. If you are evaluating whether your current theme is holding back your styling options, our comparison of WordPress against other CMS platforms can help you decide if a switch or a theme change makes more sense long term. For businesses in the GTA who want a professional to handle this kind of theme evaluation directly, Canada Create’s web design services in Yorkville include full theme audits as part of every engagement.
Security and Maintenance Considerations
Whenever you add custom CSS or install a new plugin to control styling, it is worth confirming your site’s broader security posture is solid, since even small plugins add a bit of attack surface. Canada Create’s guide on securing your WordPress website is a good companion read after you finish any styling project, and our breakdown of the four pillars of WordPress security explains the fundamentals in plain language. Canada Create maintains client sites with this same layered approach, treating small cosmetic updates and core security patches as part of the same maintenance routine.
Frequently Asked Questions
How do I change the text color on all pages in WordPress at once?
Use the Customizer’s global Colors panel on classic themes, or the Styles panel in the Site Editor on block based themes. Both apply a single color choice across every page that inherits the default typography settings, rather than requiring you to edit each page individually.
Why won’t my text color change even after I edit it?
This usually means a more specific CSS rule elsewhere in your theme is overriding the new color. Check for inline styles on the element, theme-specific classes with higher specificity, or a caching plugin serving an old version of your page.
How do I change link color separately from body text in WordPress?
Most themes expose a separate Link Color control in the Customizer’s Colors section. If yours does not, target links directly with a CSS rule such as a { color: #0066cc; } in Additional CSS.
Can I change text color in WordPress without writing any code?
Yes. The block editor’s color panel and the theme Customizer both let you change colors entirely through visual controls, with no CSS required. Code is only necessary for very specific or unusual targeting.
How do I change heading color without changing paragraph color?
Select the heading block specifically and use its own color panel in the block editor, which applies only to that block. For a site-wide heading color change, look for a separate Headings option in your theme’s Customizer Colors panel, since most themes split heading and paragraph color controls.
Related Resources
- 7 Best Multi Currency Plugins for WordPress
- Wix vs WordPress: Which Is Better?
- How to Secure Your WordPress Website
