Accessibility Tips for Gray Text

| | Comments (0)

The emergence of Web 2.0 has seen the emergence of dark gray text as a new standard in graphic design. I like it myself, but it's not with out controversy as can be seen in the classic blog article Has Your Designer Ever Heard of Contrast?

The contrast issue is simply just that you want to be ensure that the majority of your audience can distinguish text from background. And generally, the fuzzier your vision gets, the more important contrast becomes, so it's an accessibility issue (for low vision users, older viewers and migraine sufferers).

Contrast Analyzer

How do you determine if your contrast sufficient? My favorite tool has been the Juicy Studios Color Contrast analyzer.

You plug in hexadecimal values for a background color and foreground (text) color and it calculates a contrast differential. If the number is higher than 125, then you have sufficient contrast. They give you the formula (based on a W3C recommendation), so you can use it elsewhere.

Some examples.

  • Black (#000000) on white = 255 (pass, but harsh)
  • #333333 on white = 204 (pass)
  • #666666 on white = 153 (pass)
  • #828282 on white = 125 (pass, barely)
  • #999999 on white = 102 (fail)

Why Gray Text Anyway?

One theory is that it's due to the rise of the LED backlit monitor. If you have one of these beauties, everything seems much brighter and the traditional black and white can be too much contrast.

The problem of gray text arises when a designer makes the contrast a little "too subtle". The color contrast analyzer is a good way to check yourself.

I've been finding that most color contrast issues can be fixed with very minor shifts...so just play around with the numbers until you find that subtle contrast that passes the test.

Leave a comment