Loading…
17
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?
3 comments
Log in to join the discussion
Log In3 Comments
taylorknight5mo ago
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.
5
beth_anderson5mo ago
My old "good enough" approach died the day I failed a real contrast check too.
3
jordangibson4mo ago
My screen is so bright I could probably use it as a flashlight, so my idea of "good enough" is a total joke. I once spent an hour tweaking a shade of gray only to find out it was basically invisible to anyone with a normal monitor. Now I just assume my eyes are lying to me from the start and check the numbers first thing. It's a humbling way to work, for sure.
5