Links You Can Only Spot by Colour

A link that looks like the sentence around it

Read a paragraph on many recently designed small business sites and look for the links. Often there is no underline, and the link sits in a colour a shade or two away from the surrounding text.

On the designer's screen the difference is visible, and it looks tidy. Underlines were removed because they seemed old-fashioned.

For a good number of visitors, the link simply is not there. They read past the words that would have taken them to the booking form or the price list, and never know they missed anything.

Nothing is broken, which is why it goes unnoticed for years.

Who misses it

• People with colour blindness, far more often men than women.
• Anyone with low vision, including ordinary ageing eyes.
• Phone screens in sunlight, where colours wash out.
• Tired office monitors and cheap laptop screens.
• Keyboard users, who need to see where they are.

The fourth is the one designers rarely see, because they work on good screens. On an old monitor at the front desk, a link two shades darker than the text is the same colour as the text.

Why the underlines went

Underlines did not disappear by accident. Across a dense paragraph they can look busy, and the clean, flat style of recent years treats them as clutter.

The people who approve a design also know where every link is. They wrote the page, and their eyes go straight to the coloured words. A first-time visitor has no such map.

What the standard asks

WCAG 2.0, the reference standard for web accessibility, has a simple rule: colour must not be the only visual way of conveying information or telling one element from another.

For links inside text, that means an underline or some other cue that does not depend on colour.

A link can rely on colour alone only if it contrasts with the surrounding text by at least 3 to 1, and gains an underline or similar cue when hovered or selected with the keyboard.

The same standard asks for ordinary text to contrast with its background by at least 4.5 to 1, and for keyboard focus to be visible.

The underline is the simple answer

Everyone who has used the web recognises underlined words as links. It is the one convention that needs no explanation.

Restoring it is usually a single line in the site's style code. It can be styled to suit the design: thinner, set a little below the text, in the link's own colour.

Keep it consistent. If underlined words are links, nothing else on the page should be underlined for emphasis, or visitors will click words that go nowhere.

Contrast still matters

An underline solves finding the link. It does not make a pale link readable.

Light blue on white, gold on cream and pastel greens tend to fall short of the contrast the standard asks for, underlined or not.

Darken the link colour until it passes, and check the body text while you are there. Grey text on white is often lighter than it should be.

A visible focus style

People who move through a page with the keyboard, pressing Tab from link to link, rely on an outline that shows where they are.

Browsers draw one by default. Many themes remove it, because it appeared around buttons after a mouse click and looked untidy.

Without it, a keyboard user presses keys with no idea which link will open. Put the outline back, or design a clear one, such as a thick border or a change of background.

And an underline that appears only on hover does nothing on a touch screen, where there is no hover.

A worked example

An art therapist sees children and adults in a studio at the back of her home. Her site was designed to feel calm: warm grey text on an off-white background, headings in a soft sage green.

Links were a slightly darker sage, with no underline. The links to her intake form and her fees sat inside long paragraphs about her approach.

Several new clients said on the phone that they could not find how to book, and one man referred by his doctor said the site seemed to have no way to contact her at all.

The sage and the grey were close in brightness. For anyone who struggles to separate greens from greys, and on many screens, the links were just more words in the sentence.

The redesign kept the palette. Links in paragraphs gained an underline, the sage used for links was darkened until it contrasted properly, and selected links now show a clear outline.

Each page also ends with a plain button to the intake form, so booking no longer depends on spotting a link at all.

Checking your own site

Three quick tests find most of the problem.

Look at a page in greyscale, which some phones and computers offer in their accessibility settings, or print it in black and white. Any link you cannot pick out has failed.

Then put the mouse aside and press Tab through the page. If you cannot tell which link is selected at every moment, the focus style is missing.

Finally, look at the site on a phone outdoors and on the oldest monitor in the office.

The counter-case

Not every link needs an underline.

Menus, buttons and footer links are recognisable by their position and shape, and the concern is mainly links inside sentences.

A brand that cannot accept underlines can meet the rule another way, with strongly contrasting links that gain an underline on hover and keyboard focus. It is fiddlier to get right.

For links inside paragraphs, though, the underline remains the simplest answer, along with readable contrast and a visible focus style.

The check

1. Find a paragraph with links on each page type.
2. View it in greyscale or print it.
3. Underline links inside running text.
4. Darken pale link colours until they read clearly.
5. Tab through the page with the keyboard.
6. Restore the focus outline if it is missing.
7. Add a plain button for the main action.

Step three fixes most of the problem in one change. An underline works on every screen and for every kind of colour vision, and it is the cue visitors already know.

A selected option shown only by colour is just as easy to miss, which matters for tools like the one in a price calculator on the website.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.