Accessible Link Colors on White Backgrounds

Choosing Accessible Link Colors

Link colors must satisfy two accessibility requirements simultaneously:

1. Sufficient contrast with the background (4.5:1 for AA)
2. Visually distinguishable from surrounding text (3:1 contrast between link color and body text, or use underline)

Link Colors That Pass AA on White

/* All pass 4.5:1 against #ffffff */
a { color: #1d4ed8; }  /* blue-700: 8.59:1 */
a { color: #2563eb; }  /* blue-600: 5.38:1 (custom) */
a { color: #1e40af; }  /* blue-800: 10.14:1 */
a { color: #7c3aed; }  /* violet-600: 5.36:1 */
a { color: #0369a1; }  /* sky-700: 5.12:1 */

The Underline Question

WCAG 1.4.1 (Use of Color) states that color alone should not be the only means of conveying information. For links within body text, you should either:

• Always underline links (the most reliable approach)
• Ensure a 3:1 contrast ratio between the link color and surrounding text, AND provide a non-color indicator on hover/focus

/* Recommended: always underline */
a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Alternative: 3:1 contrast with body text + hover underline */
body { color: #1f2937; }  /* gray-800 */
a {
  color: #2563eb;  /* 3.23:1 contrast with gray-800 */
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}

Popular Link Colors Comparison

Color	Hex	vs White	vs #000000 body	Recommendation
Blue-700	#1d4ed8	8.59:1	2.44:1	Use with underline
Blue-600	#2563eb	5.38:1	3.90:1	Good with or without underline
Indigo-600	#4f46e5	5.22:1	4.02:1	Good with or without underline