My dad, who's colorblind, asked me to read a menu out loud at a dimly lit restaurant in Austin last week because he couldn't make out the grey text on the dark blue background.

It made me realize all my own website mockups probably have the same problem for some people, so how do you guys actually test your color combos beyond just looking at them on your own screen?

2 comments

2 Comments

the_jenny27d agoMost Upvoted

Check the contrast ratio with a free online tool. I mean, it's a basic step but it catches a lot of bad combos you might not see. Then maybe try a colorblind simulator plugin to see your site like others do.

seth_nguyen27d ago

The WCAG 2.1 AA standard needs a 4.5:1 ratio for normal text. I ran my site's main button color through a checker last week and it failed hard. The simulator showed my green call to action just vanished for deuteranopia. Had to tweak the hue a lot. It feels obvious after you see the tools but you just don't notice it staring at your own design all day.