Distinguishable Links

Many designers rely solely on color to distinguish links from regular text. While this might look clean and modern, it creates significant barriers for:

• People with color blindness: Which affects approximately 5% of the population
• Users with low vision who may have difficulty perceiving color differences
• People using monochrome displays or e-readers
• Users in challenging lighting conditions where color contrast is reduced

In addition, it's considered a best practice to have at least two (2) different items change (using CSS) when hovering or focusing on the link. For example, the following creates a blue link with underline which drops the underline and changes the color when on hover or focus.

a {
  text-decoration: underline;
  color: #007C92;
}
a:hover, a:focus {
  text-decoration: none;
  color: #8C1515;
}

Other indicators, such as bold, borders, background color, and numerous others help, as long as two different things change and it's visually obvious what is a link, especially when it is in the middle of the body copy.

Other Considerations

• Color contrast: Ensure 4.5:1 contrast ratio for link text to the background
• 3:1 ratio: Other indicators, such as borders, must have 3:1 contrast with surrounding text
• Navigation Regions: Navigation links can rely more on context and position, but should still have clear hover/focus states.