Finally gave up on my dark mode dashboard after watching a colorblind coworker struggle for 3 minutes straight

I had a navy blue background with dark teal graphs that looked sleek to me but my coworker literally couldn't tell where the data lines ended, so now I'm redoing everything with WCAG AA compliant colors, what tools do you guys use to verify contrast ratios quickly?

3 comments

3 Comments

charles_henderson6d ago

One thing nobody's brought up is that WebAIM's contrast checker lets you plug in hex codes and also simulates the three main types of colorblindness in real time. That second part is what really helped me catch issues I never would have spotted on my own. Just a heads up though, their "pass" threshold for large text is less strict than for regular text, so double check which one applies to your graphs.

robinl906d ago

Oh man, tell me about it @charles_henderson. I spent an hour once on a graph that I thought looked great, only to realize it was completely invisible to someone with deuteranopia. Makes you feel like you've been designing with your eyes closed.

perez.cole6d ago

Respectfully @charles_henderson, I dunno if I'd say their simulator caught things I would have missed... it's more like it confirmed what I already suspected but ignored. Feels like half the battle is just remembering to use the tool in the first place.