Warning: I almost shipped a dashboard with a 2.8:1 contrast ratio

I was designing a new admin panel for a client in Austin, and I got stuck on the status indicators. The client wanted them to be subtle, so I used a light gray (#E0E0E0) on a white background for the 'inactive' state. It looked clean to me. I ran a quick check with a free tool, and it passed a basic test. But then I remembered a post here about checking for low vision, so I plugged the colors into the WebAIM Contrast Checker. The ratio came back as 2.8:1, which is a fail for normal text. I was shocked. I had to explain to the client that 'subtle' was actually 'invisible' for some users. We changed the gray to a much darker shade, hitting a 4.7:1 ratio, and it still looked professional. Has anyone else been caught out by a color that looked fine on your screen but failed the actual numbers?

2 comments

2 Comments

taylorknight16d agoMost Upvoted

Honestly, the "looked clean to me" part is the whole problem. My screen is calibrated so different, I can't trust my own eyes anymore. I just start with the numbers now.

beth_anderson16d ago

My old "good enough" approach died the day I failed a real contrast check too.