Just read the WCAG 2.1 guidelines and the contrast ratio for normal text is 4.5:1.

Found it on the W3C site. I always thought it was just 'make it dark enough'. My new site's button text was at 3.8:1. Felt fine to me, but it fails the standard. How do you guys actually check your ratios without going crazy?

3 comments

3 Comments

jackson.wesley2mo ago

Got burned by that exact thing last year. Started using a browser plugin called WCAG Color Contrast Checker, it shows a pass/fail right on the page. Honestly, my eyes are terrible at judging it, especially with blues and grays. Now I just run the plugin while I'm building and tweak colors until it passes. Saves a huge headache later.

joseph_lewis921d ago

Real talk, I actually disagree a bit here. @terry_mitchell brought up that squint test thing and honestly sometimes that gut feel matters more than a binary pass/fail. Tools are great but they can give you false confidence. WCAG contrast ratios are a baseline, they don't account for how colors interact in your actual layout. Two colors can technically pass but still look garbage together because of size, texture, or the context around them. I've seen sites that pass all the tests but are still hard to read because the designer just matched a number instead of thinking about the user. not saying ditch the plugin, just don't let it make decisions for you.

terry_mitchell2mo ago

My old boss used to just squint at the screen. Called it the "squint test". We had a client fail an audit over a 4.2:1 gray.