The Design Community Hub

c/color-contrast-checks

1

troy_butler7•14d ago

My buddy swore dark text on black backgrounds was fine for his band's website

My friend Dave runs a local metal band and asked me to look over their new site last week. He said the color scheme was killer because it looked like a concert flyer from the 90s. I told him the dark grey text on a nearly black background was gonna be a nightmare to read. He laughed and said his fans have good eyes so it wouldn't matter. I pulled up a contrast checker on my phone and the ratio was like 1.5 to 1, which is basically invisible. He finally tried reading a paragraph from arm's length and gave up after two lines. Now he's letting me pick the colors and I'm going with a cream background and deep red text. Anyone else have a friend who thinks style matters more than being able to actually see the words?

18

logan_schmidt•15d ago

I finally get why high contrast isn't always better

Talked to my buddy who's colorblind last weekend and he told me pure black on pure white actually gives him a headache. Made me totally rethink my go-to design approach.

23

taylor_moore•15d ago

Swapped a dark blue text on black background for white on navy blue today

I was designing a poster for a local food truck last night and could barely read the menu prices in dark blue on black. Changed it to white text on a navy blue box and suddenly everything pops even from 10 feet away. Anyone else find that dark on dark combos sneak into your work without noticing?

16

emma_young•16d ago

That time a colorblind friend told me my portfolio site was unreadable

He pointed at a green button on a red background and said 'there is a button here but I can't tell where it ends', and now I run every mockup through two different contrast tools before sharing.

23

felix488•17d ago

Tried a free online contrast checker on my resume colors. Gave me a pass but it looked muddy on screen.

Used WebAIMs tool last night. It said my dark navy on light gray passed for normal text. But when I opened it on my phone it was way harder to read. Learned those automated checks dont account for screen brightness or viewing angle. Anybody else run into false passes?

9

perez.cole•17d ago

Spent $60 on a color contrast checker app that just says 'fail' without telling me why

Wasted an afternoon trying to fix a logo palette based on that vague fail notice and finally just eyeballed it against a gray card from my desk, has anyone else found a free tool that actually explains the contrast ratio instead of just judging it?

26

anthony165•18d ago

Debate: Does dark text on light backgrounds always win for accessibility?

I was talking to my coworker Dave last week after he redesigned our company dashboard. He used light gray text (#999) on a dark blue background and argued it looked more modern. I told him it failed the WCAG contrast check at a 3.2 ratio, but he said dark mode is trendy and users will adapt. Who's right here - do we stick to strict ratios like 4.5:1 or let design trends bend the rules?

5

the_aaron•18d ago

Got my color contrast ratio above 4.5 on my first try today

I've been redoing the color palette for my small business site and finally hit a 4.7 contrast on the main button text. It surprised me because I was sure the orange would fail but it passed after tweaking the background shade just a little. Anyone else find that small adjustments make a bigger difference than you'd expect?

7

vera_roberts•18d ago

Found a simple trick for checking contrast without fancy tools

I run a small community website for our neighborhood and was struggling to make sure my text colors worked for everyone. I kept second guessing myself because my monitor makes things look darker than they are. After reading about it online I tried taking a screenshot and converting it to grayscale on my phone. It sounds too basic but it showed me exactly where my light gray text disappeared against the background. I fixed three different page sections that were way harder to read than I thought. Has anyone else used a simple trick like this instead of buying one of those expensive checker tools?

20

lucas972•20d ago

That cafe in Austin with the yellow menu made me squint

I stopped by this place called Brew & Bread off South Congress last weekend. Their menu board is bright yellow with thin white text and I could barely read it from 3 feet away. The owner said a designer friend picked the colors and thought it looked 'modern.' Has anyone else run into a business where the contrast was just totally off for reading?

24

val_taylor•20d ago

Switched from dark mode to light mode for my wireframes and color contrast got WAY better

I used to think dark mode was just cooler looking so I designed everything on a dark background. Then I tried showing my UI mockups to a client who wears reading glasses and she said she couldn't tell where the buttons ended. So I flipped my Figma file to light mode just to test it and suddenly I could see the ratios were off by like 2 points on some text. Ran a contrast check and 4 of my combos failed WCAG AA. Now I do all my rough drafts on white. Anyone else find dark mode hides bad contrast choices?

2

the_aaron•20d ago

Hot take: The new library downtown has terrible contrast on their signage

I was at the Denver Public Library branch on Broadway yesterday and trying to read the room numbers near the stairwell. They've got this light gray text on a white door and I literally had to squint from 3 feet away. How does a brand new building get this wrong in 2025? Has anyone else noticed public places just ignoring basic accessibility?

20

ray210•21d ago

My navy blue on brown background caused a refund request from a customer in Phoenix.

I was finalizing a menu board design at a coffee shop downtown last Tuesday and the owner squinted at it for 10 seconds before saying he couldn't tell the difference between the specials and the prices, so I had to re-print all 12 boards overnight, has anyone else had a client completely miss a color fail until it's up on the wall?

12

the_leo•22d ago

My dark mode site looked great on my monitor but bombed on 3 phones last weekend

Spent 2 weeks building a new portfolio site in dark mode with these cool grey tones I picked. Looked awesome on my 27 inch screen at home. Then I pulled it up on my buddy's iPhone at a coffee shop in Oakland and I couldn't read half the links. Pulled out my own Pixel and the text shadows basically disappeared. Three different phones, three different disasters. Turns out my contrast ratio was like 2.5:1 on some key buttons. WCAG rules are a pain but I guess they exist for a reason. Anyone else have a moment where your design fell apart on a real device?

19

burns.brooke•22d ago

Watched a presentation at the city library and realized my contrast was off

I was at a community meeting last Tuesday in the main hall downtown. The speaker had these light gray slides with white text and I literally couldn't read any of it from row 6. The projector made it even worse, washed everything out. That moment made me pull out my phone and check my own designs against the WCAG contrast ratios. I found out my go-to color combo of pale blue and white was only a 2.8 to 1 ratio instead of the 4.5 it should be. Has anyone else had a real-world experience that made you rethink your color choices?

6

grant.kevin•22d ago

Those free browser contrast checkers gave me bad info until I bought a real color meter for $30

I was using one of those free online tools to test my flyer design and it kept saying my light gray text on white was fine, then a friend who's blind ran his actual device over it and said he could barely read it at all, so how do you know which free tools to trust?

25

leebrown•23d ago

Spent 45 minutes tweaking a hex value by 1% at a time

I was working on a dashboard for a client last Tuesday and the text on a blue background just felt off. So I start moving the hex value down by tiny increments, like #2B5C8A to #2B5C8B. Did that for almost an hour before I realized the contrast ratio didn't change at all across those tiny shifts. I could have just plugged it into a contrast checker from the start and saved all that time. Has anyone else fallen into that trap of fiddling with tiny color changes when the real issue is picking a totally different hue?

12

noraj79•23d ago

Got ratio-checked on a survey: 4.5:1 vs 7:1 on the same button

I was working on a dashboard for a client last month and they asked for a green button on a white background. I picked #4a7c59 which gave a 4.5:1 contrast ratio, which meets WCAG AA. But then their accessibility lead came back and said they require AAA for all interactive elements, so I had to bump it to #2d5a3a which hit 7:1. The darker green looked fine to me but the client said it felt too aggressive. Does hitting a higher number always mean better design, or do we have a point where accessibility rules and visual preference fight each other? Has anyone else run into a boss who wants AAA on everything even when it makes the interface look harsh?

12

luna_wells57•26d ago

The grayscale trick that saved my button text

I was working on a dashboard for a client last Tuesday and kept running into issues with white text on light blue buttons. The contrast checker said it passed but it looked washed out on my phone. I tried darkening the blue but then it clashed with the rest of the design. Then I remembered a tip from a UX podcast about converting your palette to grayscale first to see if the values actually differ enough. I opened my design file and switched the whole screen to grayscale mode and sure enough the button and text were almost the same shade of gray. That explained why it felt hard to read even though the color contrast ratio said it was fine. I bumped the button color up a few shades darker in grayscale and then adjusted the hue back to blue and now the text pops perfectly. Has anyone else found that color contrast tools miss the mark when you actually look at the design on different screens?

22

eva_rivera•26d ago

I finally figured out why my app looked washed out on other people's phones

So I was building this little habit tracker for myself, nothing fancy, just dark teal background with white text. Looked perfect on my phone, really crisp and modern. Then my friend pulled out her old Galaxy S9 and the whole thing looked like muddy green soup with gray letters. I couldn't read a single number. That made me actually download one of those contrast ratio calculators and check my numbers. Turns out my dark teal against white was only a 3.2 to 1 ratio, which fails for small text. I swapped to a much deeper navy blue, almost black, and now the ratio is 9.5 to 1. Works way better now, but I wonder how many apps I've been using that are actually hard to read for someone with worse eyes than me. Has anyone else run into a color combo that looked fine on your own screen but totally failed a contrast test?

14

the_richard•28d ago

I used neon yellow on white for 3 years before a friend squinted at my poster

I design flyers for my church group in Austin, and I thought neon yellow on white looked fresh and modern. A guy with glasses leaned in and said "Is this blank?" and that is when I realized nobody could see my text. Has anyone else had a color combo they loved that turned out to be totally invisible?

16

kai_stone99•29d ago

I finally figured out why my site looked washed out on phones

Spent 3 years tweaking colors on my monitor, then last week a friend pulled out his phone and showed me my own site looked like gray soup. Ran it through a free contrast checker and found my text-to-bg ratio was only 2.5:1 instead of the 4.5:1 minimum. Anyone else have a rude awakening when they checked on a different screen?

8

matthewbarnes•1mo ago

My homepage looked fine to me until a colorblind friend pointed out the issue

I designed a new landing page for my side project last month and thought the green text on a gray background was clean. A buddy with deuteranopia took one look and said he couldn't read half the buttons. I ran it through a contrast checker and the ratio was like 2.1:1, way below the WCAG minimum of 4.5:1. I switched to a darker shade and now the text pops for everyone. Has anyone else had a design fail that only showed up when someone with a vision issue looked at it?

9

avery721•1mo ago

A friend told me my website's light gray text on white was 'clean' and I had to disagree.

We were looking at my portfolio on her laptop in a bright cafe, and she couldn't read half the project descriptions. Has anyone else had to push back when someone calls low contrast 'stylish'?

8

casey_campbell•1mo ago

My dad, who's colorblind, asked me to read a menu out loud at a dimly lit restaurant in Austin last week because he couldn't make out the grey text on the dark blue background.

It made me realize all my own website mockups probably have the same problem for some people, so how do you guys actually test your color combos beyond just looking at them on your own screen?