Color contrast checking has become a non-negotiable part of my design process.
The idea is simple: are the color combinations I’m using going to pass proper contrast scores for accessibility? It sounds tedious at first, but once it’s habit, you won’t reach for a color without checking it first.
Here’s my process.
1. Identify my color combinations
Before I run any checks, I identify which color combinations I’ll actually be using together. Contrast only matters when colors are stacked — text on a background, a button label on a button color, copy inside a card. That’s what we’re testing for: is the contrast between those two colors sufficient for readability?
Be sure to write down each combo’s hex codes for the next step.
2. Run them through a contrast checker
Once I have my combos, I run each pairing through this tool. Using the hex code, I run the text color in the first box, background color in the second. I leave the setting on AA Guidelines.
It tells me whether the pairing passes — and if it doesn’t, it suggests the closest alternative that does.
From there, I make a call. If it passes, I note it and move on to the next pairing. If it fails, I check whether the suggested alternative still works with my palette and brand. If it’s too far off, I make a different design decision and avoid that combination altogether.
It can be a hard decision to make, but in the end, accessibility will always win over a design preference.
3. Build the accessibility color matrix
After I’ve run all my colors through the checker and landed on my final hex codes, I build an accessibility color matrix using this tool.
You list your hex codes one per line and it generates a grid showing which colors can be used together. I uncheck “AA18” (passes for large text only, it’s too limiting to be useful) and “DNP” (Does Not Pass, which I don’t need to see). What’s left is a clean reference of approved pairings.
Once the grid is finalized, I screenshot it and drop it into Figma for quick access during my creative process.
Design to Dollars Takeaway
Color contrast checking isn’t glamorous, but it’s one of those habits that separates good designers from great ones. And once it’s part of your process, it actually makes decisions easier — when a pairing fails, you don’t have to wonder if it’s readable enough.
