The Design Community Hub

c/color-contrast-checks

25

the_terry•1d ago

Why does nobody talk about how long it takes to fix bad contrast in an old logo?

Spent 4 hours last night trying to adjust a client's logo from 2015 where the light blue text on a white background was nearly invisible. Ended up just darkening the blue by 30% and it passed the WCAG check in 2 minutes. Has anyone else wasted a whole evening on something this simple?

13

amy_reed79•1d ago

Went from eyeballing contrast to actually using a checker tool after a client complained

I used to just pick colors that looked fine to me and call it good. But last Tuesday a client with low vision told me my light gray on white text was basically invisible to them. Now I run everything through a WCAG contrast checker before I send it out... has anyone else had a client call them out like that?

26

paigewood•3d ago

Hot take: I stopped trusting automated contrast checkers after a user called me out

I had this ui design with a soft blue on white that passed every WCAG tool, but a visually impaired user said it was basically invisible to them on their phone outdoors. Turns out the tools can't account for real-world lighting or cheap screens with bad brightness. Anyone else find that your own eyes and actual user tests work better than the checker scores?

5

betty_ward•6d ago

Back when I used to guess my contrast ratios by eye alone

Before I learned about WCAG standards in 2019, I'd just pick two colors that looked fine on my monitor and call it a day, even for body text on a client's e-commerce site. Then a user with low vision emailed me saying they couldn't read the product descriptions at all, which got me to finally buy a proper contrast checker tool for $20. Is there anyone else who still relies on eyeballing it for certain projects, or am I just old school?

26

anthony165•7d ago

Spent 3 hours fighting a green on green button that I swore was fine

I had a dashboard with a green button on a pale green background. Looked totally fine to me on my monitor. WCAG contrast ratio said 2.8:1 which is way below the 4.5:1 for normal text. I argued with the tool for 45 minutes thinking it was broken. Then I showed it to my coworker on a cheap laptop and he couldn't even see the button existed. Had to darken the green by 40% and add a thin white outline to make it pass. Has anyone else had a color combo that looked good on your screen but failed hard everywhere else?

9

emmar75•8d ago

Appreciation post: my old color picker habit vs using contrast checkers now

I used to just pick colors by eye in photoshop and hope they looked okay, throwing random blues and grays together for my band's flyers back in 2017. Then a guy at a show told me he couldn't read the set times because the text blended into the background, and I felt like a total jerk. Anybody else have a moment where someone called out your color choices and you realized you'd been guessing all along?

14

the_sage•9d ago

Rant: I was checking contrast ratios on my phone screen the entire time

I finally noticed that my web designs looked washed out on a coworker's old monitor, and it hit me that my phone's vibrant display was making colors seem way more readable than they really were. Has anyone else caught a mismatch between how colors look on different screens and had to adjust their whole workflow?

2

thomas_johnson35•9d ago

A hardware store clerk pointed out my website text was blue on blue back in 2012.

He squinted at my phone screen while waiting for a paint mix and said 'I can't read that, son, the colors just blend together' and that's the day I learned about contrast ratios the hard way, has anyone else had a stranger call out their bad color choices?

5

joseph_west59•9d ago

Had a colorblind friend point out my app was unreadable at a coffee shop

I was showing off my new dashboard design on my laptop and he just squinted and said 'what am I looking at here?' Turned out my green on red status indicators looked identical to him. Anyone else ever had a colorblind tester catch something obvious you missed?

11

the_ben•10d ago

Comparing two palette generators side by side showed me one was way off on contrast

I tested Coolors and Color Review on the same blue and white combo, and Color Review flagged the contrast as failing while Coolors said it passed by a big margin, so has anyone else found these tools giving totally different results?

21

the_viola•11d ago

Warning: My client's app failed accessibility audit because of pastel pink on white

Was working on a health app for a clinic in Denver last month. I thought the light pink on white looked nice and soft. The accessibility checker flagged it at a 2.8:1 contrast ratio which is way below the 4.5:1 minimum for normal text. Had to go back and redo all the button colors from scratch. Has anyone else had a client fight you on making their brand colors darker for accessibility?

17

barbara_moore73•11d ago

Had a nightmare week with low contrast text on my site

Last Tuesday I was trying to finish a project for a client in Denver and I kept getting complaints that my text was blending into the background. I checked my hex codes and realized I was using #999 on white which is super low contrast. Turns out I was designing on a high brightness monitor at home and it looked fine there. My client has older eyes and they couldn't read a thing. Has anyone else had a similar problem where their screen settings tricked them into bad contrast choices?

1

barnes.kai•12d ago

Wasted $60 on a high-contrast monitor profile that ruined my print colors

I bought this fancy monitor calibration tool online last month thinking it would help me nail color contrast for my design projects... turns out the profile it installed made all my reds look like muddy browns on screen. The prints I sent to the shop in Boise came back looking totally washed out, cost me an extra $45 to redo the whole batch. Anyone else ever have a calibration tool totally mess up your contrast settings like that?

8

christophermurray•12d ago

Pro tip: Stop guessing and use the APCA contrast calculator

I used to rely on that old WCAG 2.0 checker for all my designs. But after a friend with low vision tested one of my sites, she said the navigation was still hard to read even though it passed. So I tried APCA (the newer method) on that same blue and white combo. It failed hard on something the old tool said was fine. Now I run everything through APCA first, and my text readability actually matches what people see. Has anyone else switched over and noticed the same thing?

30

simon_chen•12d ago

I finally realized my blue text on gray backgrounds was killing readability after a client called it out

A guy at a local print shop pointed out my brand guidelines had a 2.1:1 contrast ratio on the main body text, and now I can't unsee how bad it looks. Anyone else catch themselves fixing old projects after learning about contrast ratios?

11

kellymurphy•13d ago

Got told my app was "aggressive" on the eyes

Someone on a forum said my dark mode colors were hurting their eyes after 10 minutes. They pointed out my blue text on black had a ratio of only 2.5:1. I changed it to a light gray and bumped the contrast to 7.1:1 using a free checker tool. Has anyone else had to redo colors after one bad review?

20

zara_allen•16d ago

Tried a dark blue background instead of black for my landing page - huge difference

I was picking between navy blue (#0a1628) and pure black (#000000) for a client's hero section, and I went with the navy because it felt softer. Turned out people with light sensitivity could actually read the white text on it way better, which I didn't expect. Has anyone else swapped out a common color for something slightly different and seen better contrast results?

18

the_patricia•20d ago

Noticed the snack aisle at my local grocery store uses pale yellow text on white labels and I had to squint to read anything.

I was at Kroger on Tuesday grabbing chips and realized the new store brand packaging is almost invisible to me, has anyone else run into contrast issues in random places like that?

12

grant.kevin•21d ago

Spent 6 months designing with dark text on white backgrounds only

Honestly, I used to think high contrast was always the answer - black text on white, every time. Then at a design review in Denver last month, a colorblind coworker pointed out my green button on a white background was invisible to them. Turns out I'd been ignoring accessibility for 40% of users who need softer contrasts. Has anyone else had a moment where a simple color swap fixed their whole layout?

18

the_patricia•22d ago

My dark blue text on black background looked fine to me but a user with astigmatism couldn't read it

Last week a guy in a forum told me my site's body text was a nightmare. I used #0a0a5e on #000000 and he said it vibrates for him. Anyone else dealt with this kind of color combo issue?

17

mila_jones39•22d ago

This week I redesigned a menu for a diner in Detroit and the owner loved it

I spent last Thursday matching their brand colors to WCAG AA standards (it was a nightmare with that neon green they wanted). Has anyone else had a client push back on contrast fixes even though it makes reading way easier for the customer?

1

phoenix845•22d ago

That time I ignored contrast ratios and lost a client over it

I used to just eyeball my text colors against backgrounds. Looked fine to me so I sent it off. Client came back saying their older team members couldn't read half the navigation on the dashboard I built. Ran it through a contrast checker and my light gray on white was like a 2.1 ratio. Had to redo 7 pages of styles for free to keep the contract. These days I check every single color pair against WCAG AA before I even start coding. Anyone else get burned by trusting your own eyes instead of the numbers?

23

joseph_lewis92•23d ago

Almost got a failing grade on a client project because I didn't check contrast once

I used to just pick colors that looked good and call it done, but last week a client in Denver sent back my whole landing page saying their 60 year old eyes couldn't read the body text. Now I run every color combo through a free contrast checker before I even start building. Has anyone else had a client call them out on readability like that?

21

gavin928•23d ago

Finally gave up on my dark mode dashboard after watching a colorblind coworker struggle for 3 minutes straight

I had a navy blue background with dark teal graphs that looked sleek to me but my coworker literally couldn't tell where the data lines ended, so now I'm redoing everything with WCAG AA compliant colors, what tools do you guys use to verify contrast ratios quickly?

8

lucaslane•24d ago

Blind customer called me out on my low contrast menu board at a diner in Omaha

I designed this new specials board for a diner downtown Omaha. Used a yellow background with white text thinking it looked clean. An older customer squinted at it for a minute then said straight up 'you trying to hide the prices from me?' Turns out the contrast ratio was like 1.5 to 1. Had to redo the whole thing with dark blue text. Anyone else had a customer spot a contrast problem before you caught it?