Web Design That Makes Links Easy to Recognize Without Relying on Color Alone
When a link inside a paragraph is marked only by blue text, readers may not recognize it as something they can select. Differences in color vision, screen brightness, and viewing conditions can make that distinction even harder. Using a community education course page as an example, this article explains how to combine visible underlines, descriptive link text, and keyboard focus indicators without depending on color alone.
Make text links recognizable before hovering
WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for making web content accessible) Success Criterion 1.4.1, Use of Color, says color must not be the only visual means of conveying information. Changing the color of a word and showing an underline only when someone hovers over it with a mouse leaves no reliable cue before interaction.
A practical default for links within sentences is a permanent underline. In CSS (Cascading Style Sheets, the rules that control how a page looks), apply text-decoration: underline in the normal state and leave a little space between the letters and the line. Links in a clearly structured navigation menu can be considered differently from links embedded in ordinary paragraphs.
If an underline is not used, another cue that does not depend on hue, such as a change in font weight, must be visible from the start. W3C also documents a technique using at least 3:1 luminance contrast between link text and neighboring non-link text. Even so, always-visible underlines are a straightforward choice for body-copy links.
Example: link colors and wording for a course information page
Using six-digit HEX (hexadecimal) color codes, set the page background to white #FFFFFF, the main text to dark gray #263445, and the links to deep blue #1E40AF. The contrast ratios against the background are approximately 12.65:1 for body text and 8.72:1 for links. Both exceed the 4.5:1 requirement for normal-sized text.
For example, a notice might say, “Before attending, check the course requirements and see directions to the venue.” Underline and link the phrases “check the course requirements” and “see directions to the venue” separately. Those phrases describe where the links lead, unlike vague labels such as “here” or “more,” and make more sense when read out of context by assistive technology.
Visited links could use purple #6B21A8, which has a contrast ratio of approximately 8.72:1 against white #FFFFFF. Keep the underline after a visit. The contrast between ordinary dark-gray text #263445 and the unvisited deep-blue link #1E40AF is only about 1.45:1. Both colors are readable on the background, but their difference alone is not a dependable way to identify links.
When a person reaches a link using the Tab key, show a clear focus indicator—the outline that reveals which element currently receives keyboard input. For instance, a 3px (three-pixel) outline in dark orange-brown #92400E has approximately 7.09:1 contrast against white #FFFFFF. Leave a little distance between the outline and the text so the focus indicator does not get confused with the underline.
Check hover, visited, focus, and mobile states
Hover effects, such as making an underline thicker, should add feedback rather than supply the only indication that text is linked. Do not remove the regular underline when the pointer moves away or after a link is visited. Keep keyboard focus visibly marked; the CSS selector :focus-visible can help style it without simply removing the browser’s default outline. On touchscreens, links must be identifiable even though there may be no mouse hover.
At WCAG 2.2 Level AA, text normally requires at least 4.5:1 contrast against its background, or 3:1 for qualifying large text. That test is separate from whether a reader can tell which words are links. Check the actual adjacent colors when backgrounds change, and test visited and focused states too.
HueRoll lets you enter a HEX code and examine the chosen color’s contrast against white or black. It does not compare arbitrary pairs of colors or automatically issue WCAG AA or AAA pass/fail judgments. Calculate link-versus-body-text contrast and combinations on non-white backgrounds separately, then test the page with a mouse, a keyboard, and a smartphone.