Hiding Underlines on Hyperlinks: The Accessibility Bug No One Mentions

#a11y #webdev

If you have built a website in the last decade, there is a good chance someone -- a designer, a theme developer, your own taste -- removed the underlines from your hyperlinks. The browser default is blue text with an underline, and almost every modern site has decided that the underline is ugly. The underline got swapped for a colour change, or a hover effect, or nothing at all.

That choice is the single most common WCAG 2.1 failure we see in small-business audits. It is not the worst failure, and it is not the most expensive to fix. But it is everywhere, it is invisible to the people who made the decision, and on the wrong day it can be exactly the kind of thing that ends up in an ADA demand letter or an EAA enforcement notice.

This article explains why a missing underline matters, what the law actually requires, and how to keep most of the visual cleanliness your designer wanted while still passing accessibility checks. No developer skills required to follow along.

What WCAG actually says about link underlines

The Web Content Accessibility Guidelines do not, in fact, require underlines on links. There is no rule that says "links must be underlined". What WCAG 2.1 does say is something more subtle, and that subtlety is where most sites trip.

The relevant criterion is 1.4.1 Use of Color, a Level A requirement. It states that colour cannot be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. In plain English: you cannot ask your users to identify what is a link purely by the fact that it is a different colour from the surrounding text.

When the browser default styling is in place, links are blue and underlined. Two visual cues. Remove the underline and you are left with one cue: colour. For a user with red-green colour blindness reading a paragraph of black text with red links, the difference may be invisible. For a user reading on a low-contrast screen at an angle, the same. For a user who has overridden colours in their browser to a high-contrast mode, the link colour can be entirely lost.

So WCAG does not require underlines specifically. It requires a non-colour way of distinguishing a link from surrounding text. Underlines are by far the easiest way to provide that. Other valid options exist -- bold weight, italic, an icon, a border -- but each comes with trade-offs the typical designer has not thought through.

Why this fails real users

The accessibility community sometimes gets accused of writing rules for users who do not exist. The "links without underlines" issue is one where the user impact is well-documented, observable, and unambiguous.

About 8% of men of Northern European descent and 0.5% of women have some form of colour vision deficiency. That is not a small group. For a deuteranopic user (the most common form, which weakens green perception), a brand-blue link in body text often appears as a slightly different shade of grey, indistinguishable from the surrounding paragraph at a glance.

Users with low vision, who account for roughly 4-5% of the adult population, often run their browsers at 200% zoom or higher and rely heavily on visual contrast cues. The colour difference between a link and surrounding text shrinks at large zoom because anti-aliasing introduces more in-between pixels.

Users on small mobile screens scanning a page in bright sunlight effectively have temporarily reduced colour vision. The sun washes out the screen. A link distinguished only by colour disappears.

And users on overridden-colours systems -- including many users with cognitive disabilities who have configured a high-contrast mode -- may be served entirely without your colour at all. The text turns yellow on black, the link colour disappears, and the link becomes invisible.

In each case, an underline solves the problem. So does any other non-colour visual indicator. Doing nothing means failing real users.

The legal layer: EAA, ADA, and what counts as a violation

The European Accessibility Act has been enforceable since June 2025 against businesses providing products or services to EU consumers. Section 508 has been federal law in the United States for decades. ADA Title III has been used in tens of thousands of website-accessibility lawsuits. All three reference WCAG 2.1 AA (or its national equivalent like EN 301 549 in the EU) as the conformance benchmark.

When an accessibility audit finds a link without an underline or other non-colour distinction, the auditor records it as a 1.4.1 Use of Color failure. If the report ends up in the hands of a plaintiff's lawyer, that finding is used as evidence of a Level A WCAG violation, which is the most basic conformance level. Level A failures are the most commonly cited issues in accessibility lawsuits because they are unambiguous and easy to demonstrate in a courtroom: load the page, point at the link, ask "how do I know this is a link?".

A single Level A failure is rarely the whole basis of a lawsuit. But it is part of the pattern that builds the case. Demand letters often list 8-15 specific WCAG failures, and a missing-underline issue is almost always one of them because it is so easy to find and so common across page templates. A site that fixes it removes one of the easiest-to-prove pieces of evidence against itself. Our overlay widget demand letter explainer walks through what these letters actually look like.

The five fixes (in order of how much you keep your design)

Designers remove underlines because the default underline looks dated and dense, especially in long-form content with many links. Reasonable enough. The good news is that there are several ways to satisfy WCAG that preserve almost everything your designer cared about. Pick the one that fits your aesthetic.

Fix 1: Restore underlines but style them. The browser default underline runs at 1px, sits flush against the baseline of the text, and matches the link colour. Modern CSS lets you change all three. Set the underline thickness to 2px so it is visible without being heavy. Add a 2-3px offset so the underline sits below the baseline rather than crashing into the descenders of letters like g, j, p, and q. Set the underline colour to a slightly muted version of your link colour. The result is an underline that looks intentional and modern rather than dated.

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(28, 95, 192, 0.6);
}

Fix 2: Underline only on hover and focus, but only for navigation links. This is the tightest acceptable compromise. It only works for links that are visually segregated from body text -- navigation menus, footer columns, tile-style link cards. In those locations, the surrounding visual context (a horizontal nav bar, a list-of-links section, a card with a button-shaped affordance) tells the user "this whole region is interactive". Add an underline on hover and on focus so the keyboard user gets feedback. Do not apply this rule to links inside paragraph text, where there is no surrounding context to communicate "this is a link".

Fix 3: Use bold weight for inline links. If your typography system has clear contrast between regular and bold weights (most modern typefaces do), bolding inline links provides a non-colour distinction. Combine the bold weight with your brand link colour and you have two cues, satisfying 1.4.1 cleanly. This works best with serif typefaces where the weight difference is very visible. Sans-serif typefaces with subtle weight gradations may not provide enough difference for low-vision users to detect.

Fix 4: Add a small icon after external links. A common pattern in newsletters and publications is to add a tiny external-link icon (an arrow leaving a square) after links that point off-site. The icon provides a non-colour cue and also tells the user where the link goes. This works well as a complementary cue but is not enough on its own for inline body links unless every link gets some icon, which gets visually noisy.

Fix 5: Just keep the underline. Long-form publications -- The Guardian, NYT, The Atlantic -- mostly kept underlines on inline links because their editors care about readability over visual minimalism. The underline on body links is the most usable pattern and the one that requires the least cleverness. Many design systems are quietly returning to it after a decade of underline-less designs.

Whichever fix you choose, the criterion is the same: a user looking at a page must be able to identify links without relying on colour alone. Walk through your site's main page templates and check each link type -- body text links, navigation links, footer links, breadcrumb links, button-styled links, and "read more" links -- against that criterion. Most sites will need to fix two or three of those link types, not all of them.

How to check your own site in three minutes

Open your site in a browser. Pick any page that contains a paragraph with at least one inline link in it -- a blog post, an FAQ entry, an "about us" page. Then run this quick check:

The grayscale test. Apply a grayscale filter to your screen using your operating system's accessibility settings (on macOS, System Settings > Accessibility > Display > Color Filters > Grayscale; on Windows 11, Settings > Accessibility > Color Filters > Grayscale). Look at the paragraph. Can you identify the link without the colour difference? If no, the link fails 1.4.1.
The squint test. Without changing any settings, lean back from your screen and squint your eyes. The visual cues that survive squinting are the ones that work for users with low vision and for users on bright outdoor screens. If the link disappears when you squint, it is too dependent on colour.
The high-contrast test. Switch your operating system into high-contrast mode (System Settings > Accessibility > Display > Increase Contrast on macOS; Windows + U then High Contrast on Windows). The brand colours often disappear in this mode. Can you still identify the link?

If your site fails any of these tests, the fix is one CSS rule change away. If you do not have a developer on hand, our five-minute accessibility audit guide and the test-your-site-with-VoiceOver guide walk through the broader checks you can run yourself in under an hour.

Why you keep finding it everywhere

The reason this issue is so widespread is that page-builder defaults and theme defaults overwhelmingly favour underline-less links. Squarespace, Wix, Webflow, Framer, and most premium WordPress themes ship with text-decoration: none on links by default. Designers building inside those tools rarely override the default because the default looks like the design template they are mimicking.

The practical consequence is that the underline-less link pattern propagated across the web through the platform layer rather than through any individual decision. You did not choose this for your site. Your platform did. And your platform did not warn you that the default fails WCAG 2.1 AA Level A.

The fix sits in a single CSS rule for most sites. The hardest part is convincing the designer who removed the underline that adding one back -- styled tastefully -- is worth a slightly less minimalist look. The argument for them is that the alternative is failing a Level A WCAG criterion, which carries real legal exposure and excludes a meaningful share of your potential customers from finding their way through your site.

Pick a Tuesday afternoon. Apply the grayscale filter. Walk three pages. Decide which fix fits your design. Ship it. The bug is small, the fix is small, and the pattern is so common that fixing it puts you ahead of most of your competitors before lunch.