The grayscale trick that saved my button text

I was working on a dashboard for a client last Tuesday and kept running into issues with white text on light blue buttons. The contrast checker said it passed but it looked washed out on my phone. I tried darkening the blue but then it clashed with the rest of the design. Then I remembered a tip from a UX podcast about converting your palette to grayscale first to see if the values actually differ enough. I opened my design file and switched the whole screen to grayscale mode and sure enough the button and text were almost the same shade of gray. That explained why it felt hard to read even though the color contrast ratio said it was fine. I bumped the button color up a few shades darker in grayscale and then adjusted the hue back to blue and now the text pops perfectly. Has anyone else found that color contrast tools miss the mark when you actually look at the design on different screens?

2 comments

2 Comments

the_viola16d ago

Is it just me or does this grayscale trick expose how much we rely on "good enough" numbers instead of actually trusting our eyes? It reminds me of how those food expiration dates don't always match when something actually goes bad.

bailey.sandra16d ago

@the_viola I actually disagree - those numbers saved me from guessing wrong plenty of times.