UX Autopsy: Death By Contrast

The Evidence

86% of homepages have low contrast text. I know this to be true because:

• Every website I audit has contrast problems
• If your users can’t read text correctly, then…
  • They can’t read what you’re saying
  • Complete actions you / they want to do
  • Fix problems when they happen

Exhibit A: 

Foreground & background  colour

1. Contrast needs to be sufficient but not overcooked
2. The size, style & weight of the font affects contrast
3. Provide controls for user agents that can modify colours

Exhibit B:

Font size

1. Use larger text

2. Aim for a minimum of 16px (1em / 100%)

3. Account for device pixel density  

Exhibit C:

Font style

1. Use fonts with wider character strokes
2. Keep letter forms familiar

Exhibit D:

Text on background images

1. Contrast usually sucks
2. Can’t guarantee what bit of the background text displays on (resolution)
3. Fubars your hierarchy

Exhibit E:

Graphical text

1. Doesn’t scale nicely
2. Users can’t modify colours
3. Usually doesn’t translate correctly
4. Contrast is normally poor
5. Possible SEO impact
6. Definite accessibility impact

Exhibit F:

UI components

1. Yes, contrast matters here too!
2. Especially with adjacent colours

Sentencing

Aggravated assault on eyes

1. Your colour guide should be determined by accessible guidelines, not opinion
2. Your font choices should promote readability
3. The right font will allow more colour combinations that still provide good contrast

Community service:

1. Check your colour contrast ratios: webAIM contrast checker
2. Install a browser extension to flag issues: here’s one or this
3. Get a grip on non-text contrast: the lowdown
4. Read up on everything contrast: WCAG contrast guidelines
5. Educate those involved who are less enlightened