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?

4 comments

4 Comments

the_jenny1mo 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_nguyen1mo 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.

the_patricia4d ago

I just ran the WCAG checker and it caught three things I'd missed myself.

mark_fisher484d ago

Buddy of mine spent like three hours designing a menu board for his food truck, got it printed, and then realized his red text on a green background was totally unreadable for half his customers. We only caught it because his colorblind cousin walked in and asked why the board was blank.