Am I the only one who spent 8 hours on color contrast ratios for a simple form?

I was building a login page for a client in Portland last month and got stuck trying to pick a green button color that passed WCAG AA against a white background. After testing 47 different hex codes with a contrast checker, I realized I could have just used a dark outline instead of fighting with the background color. Does anyone else spend way too long on tiny accessibility details that could be solved with a different design choice from the start?

2 comments

2 Comments

mark_fisher483d ago

oh man, 47 hex codes is actually rookie numbers i've definitely hit triple digits before on a project where i refused to give up on this one specific blue. but you're right about the dark outline thing except technically outlines still need to pass contrast against the background too which is where i always mess up. i think the real trick is just testing your color choices first before you start building anything, pick like 3 options and check them before you commit. also green buttons are just a nightmare in general because the accessible greens all look like something from a hospital website, i've started using dark blue or charcoal as my primary action color and it saves so much headache.

the_piper3d ago

man the green button thing is so real, i tried doing a soft sage green as a primary CTA once and it looked like i was trying to sell kombucha. what finally worked for me was grabbing like 5 different hex codes and literally pasting them into a contrast checker against my actual background color before i even opened figma. saves so much time vs tweaking in the middle of a build. and yeah switching to a dark teal or charcoal for your main action color just works way better, you can still use green for secondary success states or whatever and it won't look like a medical form.