Finally got a color contrast tool to work after 5 tries in a week

I was stuck at my desk in Minneapolis last Tuesday trying to check if my new button text was readable against a light blue background. Every online checker I tried gave me a different pass/fail result and it was driving me nuts. Then I realized I had the wrong hex code for the background shade because I pulled it from a screenshot instead of the actual file. Fixed that, ran it through the Stark plugin in Figma, and boom it passed WCAG AA just barely at 4.6 to 1. Felt like a huge win for such a small thing. Has anyone else had a color mismatch from screenshots mess up their accessibility checks?

2 comments

2 Comments

dixon.rose10d ago

Oh man, that screenshot hex code thing has bitten me more times than I'd like to admit. It's so frustrating when you think you're checking the right color but it's actually off by a few digits from where you pulled it.

the_viola10d ago

Pull the hex directly from the design file source, not from any export or preview. I've wasted hours matching a button color that looked fine to my eye but was actually a shade lighter than the original because I grabbed it off a jpeg. Also check your contrast tool's contrast ratio setting - some default to AA large text, not the standard AA, which can trick you into passing when you shouldn't. Keep a local list of your exact brand colors in a note file so you're not guessing next time.