The Design Community Hub

c/color-contrast-checks

11

kellymurphy•12h 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•3d 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•7d 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•8d 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•9d 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•9d 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•9d 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•10d 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•10d 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•11d 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?

20

bailey.xena•12d ago

Dark mode designs look great but totally fail on projectors

Last week I did a presentation at a local meetup in Portland, showed off my app's dark mode dashboard. Looked awesome on my monitor at home. Up on the projector screen? Basically invisible. The gray text on dark gray background turned into a blurry mess. Spent the whole time apologizing. Now I always check my designs on a cheap old projector before I call them done. Anyone else run into this with their color combos?

22

casey_campbell•14d ago

Spent 2 hours tweaking a client logo before realizing the contrast checker had a glitch

I was going nuts trying to get a mint green on dark blue to pass WCAG AA. Ran it through three different online tools and they all said it failed. Finally my buddy screenshotted his result on the same colors and it passed fine. Turned out my browser extension was stuck on an old cached version. Has anyone else had a tool lie to them like that?

19

mitchell.shane•16d ago

My buddy swore by that 'dark text on light gray' combo for emails...

A guy I used to work with always said gray backgrounds with black text were easier on the eyes for long reading sessions. I thought he was nuts because I liked my pure white screens. Finally decided to try his advice on a 200-page manual I had to review for my delivery route logs. After about 50 pages my eyes didn't hurt at all... he was totally right about that muted background somehow cutting the glare. Anyone else find a color trick that seemed dumb at first but actually works?

19

robinl90•17d ago

Met a guy at the hardware store who was picking paint samples by holding them up to his phone screen in sunlight

He said he was trying to match the contrast he saw on his work monitor to real life, and it hit me that I never check my designs outdoors where actual people might see them...

23

alicebarnes•17d ago

My workout poster went from "can't read e" to "oh I get it" after I changed the background from dark grey to black.

I slapped together a quick exercise guide for my clients using a grey gradient background and navy blue text, and three people asked me if the font was actually supposed to look like a blurry mess, so I flipped it to pure black with bright yellow letters and suddenly everyone stopped squinting - anyone else had a color combo that seemed fine to you but was totally wrong for everyone else?

17

perez.cole•18d ago

Took me 3 days to realize my dark mode design had buried links

I spent almost 72 hours tweaking shadows and borders on a dashboard layout before a friend glanced at it and asked where the clickable text was. Turned out my link color was only 2.8 contrast ratio against the dark background, which WCAG AA says is a fail. Who else has spent way too long on a detail that color contrast checkers could have caught in 10 seconds?

4

taylor_moore•19d ago

Can we talk about that before and after post where someone swapped their text to a super light gray on white?

I actually think the lighter gray with more spacing is harder to read than the original dark blue on cream they had six months ago, and nobody called out that accessibility checker ignores font weight and letter spacing entirely.

24

miles_roberts22•19d ago

That high contrast mode feature I ignored for years actually saved my eyes

Been designing websites since 2016. Always thought those accessibility features were for other people. Then I hit 30 and my eyes started hurting after 8 hours staring at screens. A friend at a meetup in Denver showed me how to toggle high contrast mode in the browser. Used it for a week straight. Made a huge difference on low quality monitors. Now I check my designs in it before shipping. Anyone else have a tool they brushed off that ended up being useful?

1

avery721•20d ago

Picked a dark purple over navy for my homepage banner - contrast saved me

I was messing around with a new landing page design last night and got stuck between two background colors for the hero section. One was a deep navy blue and the other was a dark purple, almost eggplant. I ran both through a contrast checker with white text on top and the purple came in at a 4.8 to 1 ratio while the navy was only 4.1 to 1. Decided to go with the purple since it meets WCAG AA for normal text sizes. The final design actually looks way more interesting too, kind of gives it a creative vibe. Has anyone else had a color you liked fail contrast tests and you had to scrap the whole idea?

21

reese551•20d ago

Had to pick between green or blue text on a dark hero image this week

I was working on a landing page for a client's outdoor gear brand and the photo had a lot of dark greens and blues in it. White text got lost, so I tried a light green first but it blended with the trees. Switched to a pale blue and ran it through a contrast checker. Got a 4.6 ratio, barely passing, so I bumped the opacity a bit and it hit 5.1. Blue worked better for readability, but it didn't feel as outdoorsy. Anyone else run into this kind of mood versus legibility tradeoff?

12

eric359•20d ago

That one comment about my button text contrast still bugs me

A guy on here told me my light gray text on a white background was impossible to read, and I argued it was "minimalist." 6 months later I checked my site analytics and realized my click-through rate was like 40% lower on that page. Has anyone else gotten defensive about feedback only to find out the critic was totally right?

7

charlie_stone72•21d ago

The moment I realized I'd been checking contrast on the wrong background layer for years

I was building a dashboard for a client in Austin last week and pulled up their style guide, only to find out the text I thought was WCAG compliant was sitting on a gradient that shifted underneath. Has anyone else caught themselves testing contrast on white when the real background is something completely different?

24

willow_anderson85•21d ago

Finally got to see that museum exhibit on 3rd Street I've been hearing about

Was in Chicago for the weekend and stopped by the Museum of Science and Industry. Noticed their new exhibit info cards are using this light gray text on white background. I couldn't read half of it from 2 feet away. Had to pull out my phone to check contrast and it was like 2.5:1. Walked to another section and those signs were fine. So somebody definitely skipped a step. Has anyone else caught bad contrast in a public space and felt awkward about it?

10

barbara429•23d ago

Went with dark gray text on a light gray background despite everyone saying no

My client wanted a soft, modern look for their bakery website. Every designer I talked to said go with black on white for readability. I picked a dark charcoal on a pale warm gray instead. Ran it through a contrast checker and it passed at 4.6 to 1 for normal text. Customer was thrilled and I haven't had a single complaint about legibility in 6 months. Anyone else bend the rules and get away with it?

29

angela_wilson78•24d ago

Debate: Bold text vs. high contrast backgrounds for readability?

Honestly, last week I was working on a flyer for a community event in Austin and got into a huge argument with my friend Jenna. She swears by using bold text on a lighter background to make things pop, but I think high contrast backgrounds like dark blue on white work way better. I tested the flyer on a projector at 25 feet and the bold text was fuzzy while the high contrast looked sharp. What do you all lean toward when you have to pick one?