How I Learned to Stop Worrying and Ignore WCAG

1.4.1 Use of Color (A)

Summary of Contrast Success Criteria

Never use color alone to tell the difference between things

What is not color?

Warning: Some good; some not as good

• Text
• Underline
• Patterns
• Position on page
• Luminosity - contrast ratio of at least 3 to 1
• Text styling
  • Bold
  • Different Font
  • etc.

Link Underline Exception

For text links surrounded by other text, Technique G183 allows removal of visual indicator if...

• the contrast ratio with surrounding text is at least 3 to 1
• has a visual indicator on focus

Examples

Failing Example

Somewhere in this sentence is a link that fails 1.4.1.

Passing Example

Somewhere in this sentence is a link that passes 1.4.1.

• Text Color: #000000
• Link Color: #665367
• Background Color: #FFFFFF

Luis's Recommendation

• Require underlines for links and buttons inline with non-interactive text
• Only consider position as a differentiator
• Allow use of font weight, luminance, etc.