You can change link color in WordPress from Styles > Colors > Link when your site runs a block theme. Classic themes use the Customizer, and a short CSS snippet works on any theme and covers hover and keyboard focus too. Most sites need about five minutes for the whole change.
We tested every method in October 2026 on our WordPress 7.1.3 test site with WooCommerce 11.2, using Twenty Twenty-Five, Twenty Twenty-One and Astra 4.14.1. Each color pair went through the WebAIM Link Contrast Checker. One result surprised us: a blue that passes on white fails on the green background of Twenty Twenty-One.
Below you will find the Site Editor steps, the one-block and one-link options, the classic Customizer and a CSS snippet for every link state. Then come the theme.json method for developers, an accessibility check against WCAG 2.2 and fixes for a link color that will not change.
Which Method Changes Link Color on Your Site?
Your theme type decides where the link color setting lives. Block themes such as Twenty Twenty-Five use Styles > Colors > Link in the Site Editor, while classic themes keep any link setting in the Customizer. Additional CSS works on both, and theme.json is the route for theme developers.
Not sure which kind of theme you run? Open the Appearance menu in your dashboard. An Editor item means a block theme, and a Customize item means a classic theme.
Our guide on where the Styles tab is in WordPress also covers what to do when Editor is missing.
Pick the smallest scope that does the job. A site-wide color belongs in Styles or the Customizer, and one paragraph belongs in the block settings. Only CSS reaches states such as visited and keyboard focus.
How to Change Link Color in WordPress With Styles
To change link color in WordPress on a block theme, open the Site Editor and go to Styles > Colors > Link. A popover with Default and Hover tabs lets you set both colors for every link on the site. Save the change and check the underline under Styles > Typography > Links last.
The WordPress Styles documentation describes the same panel: you set the default link color for the site and the hover state from one place. These are the five steps we followed on Twenty Twenty-Five.
Step 1: Open Styles in the Site Editor
Go to Appearance > Editor in your dashboard and click Styles in the left menu. The Styles panel opens with Typography, Colors, Background, Shadows and Layout listed under the preview card.
Colors holds the link color itself. Typography holds the underline and font settings for links, which you will need in Step 5.
Step 2: Choose Colors and Then Link
Click Colors. Under Elements, WordPress 7.1.3 lists Link, Captions, Button and Heading, and each row shows small circles for its current colors.
Twenty Twenty-Five ships its links in currentColor. Links match the body text and rely on the underline alone. That is why a fresh install shows black links.
Step 3: Set the Default Link Color
Click Link to open the popover. On the Default tab, click the large color swatch, type your hex code into the field and press Enter. We used #2563EB, a blue that passes the contrast checks covered later in this guide.
The preview on the right updates as you type. Theme palette colors appear below the swatch if you would rather pick one of those.
Step 4: Set the Hover Color and Save
Switch to the Hover tab and set the link hover color the same way. We picked #1E3A8A, a darker blue that makes the change easy to see when a mouse moves over a link.
Click the Review button at the bottom of the left menu and choose Save in the dialog. The dialog lists the change as Link element under Global Styles.
Step 5: Check the Underline in Typography
Go back to Styles and open Typography > Links. The Decoration row offers none, underline and strikethrough, along with font, size and line height for links.
Here is the catch we found. Twenty Twenty-Five removes the underline on hover in its theme.json, and this panel has no hover tab for decoration in 7.1.3.
So the underline disappears the moment a visitor points at a link. The CSS section below shows the rule that keeps it. If you are also adjusting text sizes, our guide to changing font size in WordPress uses the same Typography panel.
How to Change Link Color for One Block or One Link
You can give one paragraph its own link color from the block settings, or recolor one link with the Highlight tool. Both changes stay inside that post or page. The rest of the site keeps the color you set in Styles, which suits a single sale link or callout.
Change Link Color for One Paragraph Block
Select the paragraph in the editor and open the Block tab in the sidebar. In WordPress 7.1.3 the link setting sits under Elements.
Click the plus icon next to Elements and choose Link. Then set a color on the Default or Hover tab.
We set #C2410C on one paragraph in our test. The saved block markup held the color and a has-link-color class. Every link in that paragraph turned orange while the others stayed blue.
Change the Color of a Single Link
Select the link text, open the toolbar’s More menu (the small arrow) and choose Highlight. On the Text tab, pick a palette color.
This wraps the words in a mark element inside the link. In our test the text turned purple, but the underline kept the site link color, because the underline belongs to the link itself. Our guide on how to change font color in WordPress covers the same Highlight tool for plain text.
How to Change Link Color in a Classic Theme
Classic themes keep link color in Appearance > Customize when the theme adds that control. Astra puts it under Global > Colors > Links with separate normal and hover colors. Twenty Twenty-One has no link color control, and on that theme CSS is the only route.
Astra: Global Colors and Links
Open Appearance > Customize > Global > Colors in your dashboard. The Theme Color group holds an Accent row and a Links row with two swatches.
The first swatch is the normal link color and the second is hover. Click each one, type the hex code into the Hex field and click Publish.
Astra 4.14.1 links both swatches to its Global Palette by default and marks them with a globe icon. After we typed hex codes, Astra saved the plain #2563eb value. Palette changes no longer reach your links after that.
Twenty Twenty-One Has No Link Color Setting
Twenty Twenty-One 2.9 shows a Colors and Dark Mode section with one Background color control and a Dark Mode checkbox. There is no field for links.
Many older classic themes work the same way. If your Customizer has no link field, skip straight to the CSS method below.
How to Change Hyperlink Color in WordPress With CSS
To change hyperlink color in WordPress with CSS, add rules for the normal, visited, hover and focus states to Additional CSS. The snippet below works in block and classic themes. It also keeps the underline on hover and skips the .wp-element-button class that WordPress gives its buttons.
This is the snippet we pasted on both test themes:
/* Link color for every text link (buttons excluded) */
a:where(:not(.wp-element-button)) {
color: #2563eb;
text-decoration-line: underline;
text-underline-offset: 0.15em;
}
a:where(:not(.wp-element-button)):visited {
color: #7c3aed;
}
a:where(:not(.wp-element-button)):hover {
color: #1e3a8a;
text-decoration-line: underline;
text-decoration-thickness: 2px;
}
a:where(:not(.wp-element-button)):focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
border-radius: 2px;
}
Keep the order of normal, visited, hover and focus. A later rule wins when two have the same weight. Hover placed above visited would never show on a link someone already opened.
Add the CSS in a Block Theme
In the Site Editor, open Styles and click the three-dot menu at the top of the panel. Choose Additional CSS.
The Styles documentation notes that Additional CSS moved into this ellipsis menu in WordPress 6.9. Paste the snippet into the box and save through the Review button.
The same page says this CSS survives theme updates but is cleared when you switch themes. Our guide to creating a WordPress child theme shows where to keep it if you change themes often.
Add the CSS in a Classic Theme
Go to Appearance > Customize > Additional CSS, paste the snippet and click Publish. The preview updates before you publish, and you can check each link there first.
On Twenty Twenty-One the paragraph with its own block link color stayed orange. Block-level link colors carry a class, and that class outweighs this site-wide rule.
What the CSS Does on the Front End
We pressed Tab until the account page link had keyboard focus. The :focus-visible rule drew a 2 px blue outline around it, while hover thickened the underline and darkened the blue.
In our test a mouse click focused the same link without matching :focus-visible. The outline rule stayed off. Keyboard users get the ring and mouse users do not, which is the point of the rule.
Keep the Rule Away From Product Titles
A site-wide link rule reaches every a element. On Twenty Twenty-Five our WooCommerce shop titles turned blue. The header account icon changed color as well.
To color only links inside posts and pages, start each selector with .wp-block-post-content on block themes or .entry-content on most classic themes. The Add to cart buttons kept their black button style in our test because they are buttons. Changing them is a separate setting under Styles > Colors > Button.
If you need link styles that change per template, per WooCommerce page or per plugin output, that is scoped CSS work. Our WordPress development services team can write and test it on a staging copy of your site.
How to Set Link Colors in theme.json
Theme developers set default link colors in theme.json under styles.elements.link. Hover, focus, active and visited go in as nested keys, and WordPress turns them into CSS for the whole site. Users can still override these defaults later from Styles > Colors > Link.
The WordPress Developer Resources page on applying styles lists the pseudo-classes the link element supports: :hover, :focus, :active and :visited.
This is the theme.json we tested in a child theme of Twenty Twenty-Five:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"styles": {
"elements": {
"link": {
"color": { "text": "#2563eb" },
"typography": { "textDecoration": "underline" },
":hover": {
"color": { "text": "#1e3a8a" },
"typography": { "textDecoration": "underline" }
},
":visited": { "color": { "text": "#7c3aed" } },
":focus-visible": {
"outline": { "color": "#2563eb", "offset": "2px", "style": "solid", "width": "2px" }
}
}
}
}
}
The docs list only four pseudo-classes, yet WordPress 7.1.3 also printed our :focus-visible outline rule in the global stylesheet. We confirmed it in the generated CSS. Test it on your own version before you rely on it, and keep a CSS fallback for older sites.
Link Color Accessibility: Contrast and More Than Color
A link color has to pass two contrast checks under WCAG 2.2. Text needs 4.5:1 against the background, and a link without an underline needs 3:1 against the body text around it. Most failures we saw came from removing the underline on hover or using a light background.
Success Criterion 1.4.3 sets a contrast ratio of at least 4.5:1 for normal text. Large text, meaning 18 point or 14 point bold, needs 3:1.
The second check comes from Success Criterion 1.4.1 Use of Color: color must not be the only visual means of conveying information. W3C’s technique G183 puts a number on it for links that have no underline.
Automated checkers flag the same problem. The axe rule link-in-text-block is titled “Links must be distinguishable without relying on color” and maps to SC 1.4.1.
We ran our colors through the WebAIM Link Contrast Checker on October 27, 2026, with #111111 body text and a white background unless noted:
| Link color | Against background | Against body text | Result |
|---|---|---|---|
| #2563EB | 5.16:1 | 3.65:1 | Passes both |
| #1D4ED8 | 6.70:1 | 2.81:1 | Needs an underline |
| #C2410C | 5.17:1 | 3.64:1 | Passes both |
| #7C3AED (visited) | 5.69:1 | 3.31:1 | Passes both |
| #1E3A8A (hover) | 10.3:1 | 1.82:1 | Needs an underline |
| #2563EB on Twenty Twenty-One #D1E4DD | 3.90:1 | 2.57:1 | Fails both |
Darker blues look safer but fail against near-black text. They need the underline to stay. That is why our CSS keeps the underline on hover, since #1E3A8A is almost as dark as the body text.
The third check is focus. Success Criterion 2.4.7 asks that the keyboard focus indicator stays visible, which the :focus-visible rule handles. For a full site review, our web accessibility audit guide walks through the other checks.
Why Your Link Color in WordPress Is Not Changing
When the link color in WordPress will not change, the cause is usually a cache, a block-level color or a more specific theme rule. Work through the checks below in order. Each one takes a minute or two with your browser’s developer tools.
These are the causes we hit or confirmed during testing:
- Page cache: Caching plugins and CDNs keep serving the old CSS. Purge the cache and reload the page in a private window.
- Block-level colors: A paragraph with its own link color keeps it, because block styles carry a class that outweighs the site-wide rule.
- Theme hover rules: Twenty Twenty-Five removes the underline on hover in theme.json. Add the hover rule from the CSS section to bring it back.
- Navigation menus: The Navigation block sets its own colors. Menu links ignore the Link element in our test. Change them in the block settings or under
Styles > Blocks > Navigation. - Wrong theme panel: Additional CSS belongs to one theme. After a theme switch the old CSS disappears, as the WordPress docs warn.
- Higher specificity: Right-click the link, choose Inspect and look for a crossed-out color. The rule above it is the one winning.
Conclusion
The fastest way to change link color in WordPress depends on your theme. Block themes use Styles > Colors > Link with separate default and hover colors, and classic themes rely on whatever the Customizer offers.
CSS fills the gaps. It reaches visited and keyboard focus, keeps the underline on hover and works when a theme like Twenty Twenty-One has no link field.
Before you publish, run your colors through a contrast checker against both the background and the body text. If you are restyling text as well, our guide on how to change fonts in WordPress pairs well with this one.
Frequently Asked Questions (FAQs)
Q1. How do I change the visited link color in WordPress?
Styles has no visited setting in WordPress 7.1.3, and CSS covers that state instead. Add an a:visited rule to Additional CSS, after the normal link rule and before the hover rule. W3C’s Use of Color guidance notes that authors can only use color to style :visited.
Q2. How do I remove the underline from links in WordPress?
Set Decoration to none under Styles > Typography > Links on a block theme. Before you do, check that the link color has 3:1 contrast with the body text. Without that contrast, readers with low color vision cannot find your links.
Q3. What is the best color for links on a website?
A blue such as #2563EB works on white pages with dark text, because it passed both WCAG checks in our test. Any color can work if it reaches 4.5:1 against the background. It also needs 3:1 against body text or a visible underline.
Q4. Does changing link color affect SEO?
Link color is a design choice and does not change how search engines rank a page. Clear links do help visitors find related pages and click through. That improves how people use your site.
Q5. Why does the new color show in the editor but not on the live site?
A page cache or CDN is usually serving the old stylesheet. Purge the cache in your caching plugin and at your CDN before you check again in a private window. If the color still does not show, inspect the link for a more specific theme rule.
Q6. Can I change the hyperlink color for mobile only?
Yes, with a CSS media query. Wrap the link rule in @media (max-width: 600px) in Additional CSS, and only small screens will use that color. Styles and the Customizer apply one color to every screen size.
Q7. Does the link color change the WooCommerce Add to cart button?
No. In our WooCommerce 11.2 test store the Add to cart buttons kept their black button style after the link color change. Buttons follow Styles > Colors > Button on block themes and the theme’s button settings on classic themes.
