c/color-contrast-checks

Shoutout to the person who called my chart 'sunlight washed out'

I made a line graph for a local group's yearly report, using light blue on a white background. I thought it looked clean. Someone at the meeting, who I later found out has some vision trouble, said it just looked like 'faded lines in sunlight' and they couldn't follow the data at all. That hit me hard. I ran it through a checker tool and sure enough, the contrast ratio was way too low. I changed the blue to a much darker navy, almost a black-blue, and kept the white background. The difference was huge. The chart went from looking pretty to actually being useful for everyone. It made me realize I was designing for my own eyes, not for all the people who need to read it. Has anyone else had a simple piece of feedback totally shift how you pick colors?

My boss in 2015 told me to stop using light grey text on white backgrounds

He said it looked clean but was a real problem for some people. I didn't listen for months, thinking it was just his personal taste. Then a user survey came back and three people specifically said they couldn't read the help text on our forms. That was the grey text I'd picked. Has anyone else had a simple piece of advice they ignored that later proved totally right?

Showerthought: Our town's new park sign is impossible to read at dusk.

They used dark blue text on a black background, and last Tuesday I saw three people walk right past it looking confused. Has your city ever rolled out a design that failed a basic contrast check?

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?

Just bought a color contrast checker plugin for $25 and it caught a huge issue

I was finishing a website for a local cafe and thought my teal text on a light gray background looked fine. The plugin flagged it instantly, showing the contrast ratio was way too low for people with vision issues. I changed the text to a darker blue, which passed the check. Has anyone else found a good tool that catches stuff you'd miss?

My sister couldn't read the menu at a diner in Boise because of the colors they used.

We were at a place called The Griddle last weekend for breakfast. The menu was printed with a dark green background and brown text. My sister has some vision trouble and she just handed it back to me and said, 'I can't make out a single word.' I had to read the whole thing out loud to her. It made the whole meal awkward and slow. Has anyone else run into a public place with a menu this bad?

Saw a new park sign in my town that's really hard to read

They put up a new welcome sign at Riverside Park last week. The background is a dark forest green and the text is a medium gray. I was about 20 feet away and honestly couldn't make out the park rules at all. My friend with me said the same thing. It's a real shame because the old sign was black text on a beige background and was fine. Has anyone else run into public signs with bad contrast like this? What's the best way to give feedback to the town about it?

Honestly, my cousin with low vision called out my website colors at a family BBQ

He was trying to check the schedule on his phone and just said, 'This gray on white is brutal, man.' It happened right there by the grill in his backyard. Has anyone else had a moment like that where someone just bluntly pointed out a contrast fail?

Spent $40 on a contrast checker app after a client's feedback

A client said the text on a flyer I made was 'hard to read' for her dad, which stung (I thought the colors looked great). The app showed the contrast ratio was way below the recommended level, something my eyes just didn't catch. Has anyone else had a client point out an accessibility issue you totally missed?

I switched my site's main text from a light gray to pure black last month

My bounce rate dropped by 15% in two weeks. Some folks say high contrast is too harsh, but the numbers don't lie. Do you think pure black is ever a bad choice for body text?

My friend said my new site's text was hard to read, and I didn't believe her.

She told me the gray text on my light blue background failed a contrast check, and after running it through a free tool, she was right. I changed it to a darker blue and got a passing score, and the feedback from users has been way better. What's the best free contrast checker you guys use for quick checks?

Ngl, I keep seeing people use light gray text on white backgrounds in their app mockups. How do you even check if that's readable?

I used to think my dark blue on gray looked fine until I saw it on my mom's old tablet

I was showing her my new blog layout last week and she had to squint at the screen from across the room. I ran the colors through a checker and the contrast ratio was only 3.2:1. What's a good way to test designs on older screens before you launch?

I just wasted $300 on a custom logo because I didn't check the colors myself.

I hired a designer for my small clinic's website, and they sent over a beautiful logo with a light gray text on a white background. I approved it because it looked fine on my bright monitor. When we printed it on our new patient forms, you could barely read the clinic name. I had to pay another $300 to have it completely redone with proper dark blue text. Has anyone else been burned by not running a basic contrast check before signing off on a design?

Just learned something wild about color contrast from a local library flyer

I was picking up a flyer for a kids' reading program at my library in Springfield and noticed the text was super easy to read. I ran it through a contrast checker on my phone out of curiosity. The light blue on white background had a ratio of 3.2:1, which is above the minimum for large text but not for small. The librarian told me they use a free tool called Colorable for all their community stuff. It blew my mind that a small town library is that on top of it. Has anyone else had a moment where a simple local thing just got the contrast totally right?

PSA: I just hit 500 failed contrast checks on a single button design

I was working on this app screen for a local bakery's online ordering, using what I thought was a nice dark green (#2E5E3A) on a cream background, and my checker flagged it as failing WCAG AA for normal text (the ratio was 3.8:1). I've been tweaking shades for two days straight and just watched the failure counter tick over to 500 attempts. How do you even start to pick a new color when you're this deep in the weeds?

Working on a flyer for a local 5k and my friend's kid couldn't read the times.

I was at my friend's house in Austin last month, showing them the flyer draft on my laptop. Their eight year old, who has some vision stuff, squinted at the screen and said 'the numbers are fuzzy.' I had used a light green on a white background for the race start times. I ran it through a contrast checker and it failed hard, like a 2:1 ratio. Now I test every color pair before I show anyone. What's the lowest contrast ratio you all still use for body text on a project like this?

Watched a presentation where the speaker insisted dark blue on black was 'high contrast' because they used a 4.5:1 ratio tool, but my buddy with deuteranopia couldn't read a single word.

Is relying solely on automated contrast ratio scores a dangerous crutch, or are those numbers the only objective standard we've got to prevent truly awful choices?

Heard a guy at the coffee shop yesterday complaining his new app's text was 'ghosting' on his screen. Turns out he was just using light gray on white.

My friend told me to use a dark blue on my light gray text and I'm so glad I tried it

I was working on a flyer for a local bake sale and had this light gray text on a white background. My buddy Mark, who does a lot of web stuff, looked at it and said, 'Dude, that's gonna be impossible to read for some folks, try a dark blue instead.' I thought it would look weird, but I swapped it to a navy blue and checked it with a contrast tool. The score went from like a 2.5 to a 7.5, which is way better. Has anyone else had a friend give you a simple color tip that made a huge difference?

My neighbor's kid couldn't read the score on my new app mockup

I was showing off a phone screen I made for a local bowling league app, and my neighbor's ten year old squinted and said 'what does that number say?'. The score was light gray on a white background. I mean, it looked clean to me, but I guess it was a total fail. I had to hold the phone right up to his face. Has anyone else had a kid point out a contrast problem you totally missed?

Just realized my new app's button colors were a problem for my colorblind friend

I was showing my buddy the prototype and he couldn't tell the 'submit' button from the 'cancel' one because I only used red and green. I swapped the green for a blue with a different icon, and now he says it's way clearer. Has anyone else had to fix a design like this after getting real feedback?

Warning: I almost shipped a dashboard with a 2.8:1 contrast ratio

I was designing a new admin panel for a client in Austin, and I got stuck on the status indicators. The client wanted them to be subtle, so I used a light gray (#E0E0E0) on a white background for the 'inactive' state. It looked clean to me. I ran a quick check with a free tool, and it passed a basic test. But then I remembered a post here about checking for low vision, so I plugged the colors into the WebAIM Contrast Checker. The ratio came back as 2.8:1, which is a fail for normal text. I was shocked. I had to explain to the client that 'subtle' was actually 'invisible' for some users. We changed the gray to a much darker shade, hitting a 4.7:1 ratio, and it still looked professional. Has anyone else been caught out by a color that looked fine on your screen but failed the actual numbers?

I was reading a menu at a diner in the rain and couldn't make out the specials

It was a gray afternoon and I stopped at this little place off the main road. The specials were written on a chalkboard with light yellow chalk on a dark gray background. I was maybe six feet away, squinting, and the guy next to me just read them out loud without even looking up from his coffee. He said, 'It's the chili, always is on Tuesdays.' That's when it clicked for me. I design stuff for screens, and I've run all the contrast checkers, but I never really thought about how it works in the real world with bad light and people who aren't looking for it. That chalkboard probably looked fine to the person who wrote it, standing right there in the well-lit kitchen. But from across a dim room? Total washout. Made me go back and look at my own site's 'important announcement' banner with fresh eyes. Has anyone else had a moment where a real-world fail made you rethink a digital design rule?

Just realized my old website's button colors were a total fail

I switched the main button from a light blue on white to a dark navy on a pale yellow background. The contrast ratio jumped from 2.5:1 to over 7:1, and now my friend with color blindness can actually see the call to action. What's the biggest contrast mistake you've had to fix in a design?