The Design Community Hub

c/dark-mode-design

11

robinmason•22h ago

Talked to a UX designer at a coffee shop last week about dark mode contrast

She mentioned most people don't check their text contrast against the actual background. I was using a pure black background with white text - thought it looked fine. She pulled out a contrast checker on her phone. Turns out my ratio was way off. Has anyone else tested their dark mode color combos with a WCAG tool?

19

the_shane•1d ago

Redid my site's dark mode after seeing a side by side comparison from 3 months ago

I was digging through old design files last night and found the first version of my portfolio site's dark mode from October. Put it next to what I have now and wow, the difference is huge. Back then I was just using pure black backgrounds with white text, no contrast control at all. Now I use a deep gray (#1a1a1a) and subtle blue tones for highlights, it's way easier on the eyes after 20 minutes of reading. The main thing that changed was I started testing on my phone at night with brightness at 40%, that forced me to fix all the glare issues. Has anyone else gone back and cringed at their early dark mode attempts?

11

zarak18•3d ago

A UX writer told me my text contrast was making people's eyes bleed - and they were right

Had a dark mode design review last Tuesday where a UX writer pulled up my app on their phone and literally squinted. They said the gray text on dark gray background looked like "someone whispering in the dark." I had been using #888888 on #1A1A1A because I thought it looked sleek. But after they showed me side by side with WCAG AA compliant text at #B0B0B0, I realized my old setup was basically unreadable after 5 minutes. Now I keep a contrast checker bookmark on my browser toolbar. Anyone else get called out on subtle color choices that seemed fine until someone pointed out the obvious?

16

diana_bell74•5d ago

Unpopular opinion: I stopped using dark gray backgrounds for dark mode, went with a deep navy instead

I tried dark gray (#121212) for over a year on my portfolio site because everyone says it's the gold standard. Finally switched to a navy tone like #0A192F after a designer friend pushed me to try something different. My bounce rate dropped from 62% to 44% in about 3 weeks because the blue tint actually felt more natural. Text contrast looked better too since I didn't have to crank up white to 100% to make it readable. Anyone else experiment with colored dark backgrounds or am I the only one moving away from pure neutral tones?

16

shah.evan•5d ago

I finally stopped using pure black backgrounds after a dev showed me my eyes were literally hurting

For like 2 years I was designing dark mode with #000000 as my main bg color. I thought it looked clean and modern. Then a developer buddy screen shared my design and pointed out the eye strain from the harsh contrast. He showed me how his team uses dark gray like #121212 instead and my eyes relaxed immediately. I tested it on my own phone at night and realized I was basically staring into a void this whole time. Now I never go below #1a1a2e for backgrounds unless it's for specific accent areas. Has anyone else had that weird guilt switch from pure black to near-black and felt silly about it?

4

wadepalmer•5d ago

Had a talk with my brother that changed how I pick dark mode colors

My little brother, who is a gamer not a designer, asked me why all my dark mode designs look the same. He said they all use that standard dark gray background and white text. I told him it's the safe way to do it. But he showed me a game he plays called Hades, where the dark backgrounds have subtle blue and purple tones. I tried something similar on a dashboard project last week. I used a very dark navy instead of straight black for the background and soft amber accents in the UI. The client actually commented that it felt more alive and easier to read at night. Have you ever pulled color inspiration from video games or movies for your dark themes?

2

schmidt.blake•6d ago

Turned off all my overhead lights after 3 years of bad dark mode

Kept tweaking colors forever but everything still looked washed out. Finally killed the room lights completely and just used a $12 desk lamp pointed at the wall. Fixed all my contrast issues in one night. Anyone else find blackouts help?

14

amy302•6d ago

My dark mode update broke the entire site last Friday

I pushed a dark mode redesign to our app with what I thought were good contrast ratios. Ended up making all the links invisible on some older monitors people are still using. Had to roll back in 20 minutes and redo all the color testing with a proper tool.

8

ray210•6d ago

Three years ago I made the mistake of using pure black (#000000) for a dark mode app...

I was working on a reading app back in 2021 and thought full black would look clean and save battery. Users started complaining about eye strain within a week. One guy told me the text looked like it was floating. I switched to a dark gray (#121212) and the complaints stopped almost overnight. Been wondering if anyone else found that pure black causes weird contrast issues on OLED screens?

23

the_jason•7d ago

TIL I was picking the wrong contrast ratio for dark mode for like 2 years

Honestly I always used 4.5:1 for everything in dark mode thinking that was the gold standard. Then last week a client with bad astigmatism sent me a screenshot of my app with yellow text on a dark gray background and said they couldn't read a single button. Took me a whole afternoon to figure out that WCAG recommends 7:1 for body text in dark themes because of how light text bleeds on dark screens. Has anyone else found that the standard ratio just doesn't cut it on actual dark backgrounds?

3

uma_patel19•7d ago

That time a senior dev told me to stop using pure black backgrounds in dark mode

About 3 years ago I was building my first dark theme for a React dashboard. A senior dev named Mike looked at my mockup and said 'stop using #000000, it causes eye strain on OLED screens.' I didn't believe him at first because pure black looked so clean. After I switched to a dark gray like #121212 and tested it on my phone at night, I saw exactly what he meant. The text was way easier to read and my eyes didn't feel tired after 20 minutes. Has anyone else noticed a big difference switching from pure black to a dark gray?

6

wadepalmer•9d ago

Swapped my dark mode palette for pure black and white and my users revolted in 2 days.

I thought true #000000 would look sleek for a dashboard i was building, but the contrast was so harsh people complained of eye strain within hours. Did anyone else have to dial back their blacks after getting real feedback?

12

angela_wilson78•10d ago

Why I switched from pure black to dark gray backgrounds after a coding session in a dark room

I was working on a dark mode app at 2am and my eyes started burning from the contrast of pure black with white text. A UI guy I'd never met looked at my screen and said 'you're ruining your retinas with that #000000.' Made me switch my base color the next day. Anyone else ditch true black for something softer?

21

robert_bennett29•10d ago

User complained my dark mode was "too blue" and then asked for the same shade I had originally

Had a client last Wednesday send me a 7 paragraph critique because my dark mode background had a "cold blue tint" so I spent 4 hours redoing it to a warmer gray they approved. Next morning they emailed saying the new version looked "muddy" and could I just make it the blue from the first draft again. How do you handle people who make you rebuild something they already had?

27

ivancoleman•11d ago

Burned $150 on a "premium" dark mode theme pack and it was all hype

I dropped $150 on a dark theme design pack from some popular creator last month. Thought it would save me time with pre-tested contrast combos and ready-to-use color scales. Turned out the dark grays were way too close together, making text completely unreadable on cheap monitors. The accent colors bled into each other too, like blue on purple looked awful. I spent more time fixing their mistakes than if I just built my own palette from scratch. Total waste of cash and honestly made me trust those influencer designers less. Has anyone else got burned by those premium toolkit packs that promise the world?

19

cameron_craig•11d ago

Realized my dark mode was just gray mode after a friend squinted at my screen

I was designing a dark theme for a recipe app and thought I had it nailed. Then a buddy tried using it at night and said 'dude, this isn't dark, it's a dim gray' and I saw all my backgrounds were around #2a2a2a instead of true black. Has anyone else missed the mark on what 'dark' actually means in terms of contrast?

14

simon_black•13d ago

Tried a pure black background (#000000) for a week and my eyes are paying for it

I switched my portfolio site to a true black background thinking it'd look cleaner and save battery on OLED screens. After 4 days of editing code and reading text on that thing, I started getting these weird ghosting headaches every evening. Switched back to a dark gray like #1a1a1a and the strain went away completely within 2 days. Has anyone else found that pure black just doesn't work for text-heavy interfaces?

21

logan_schmidt•13d ago

PSA: That super dark gray background I tried looked great on my monitor but not on phones

Spent a week building a dark mode design that used #121212 for the background. Looked perfect on my OLED laptop screen. Then my client tested it on their 3 year old iPhone and the text was basically invisible. Different screens handle black levels way different. Anyone else run into this with cheaper phone displays?

23

max388•18d ago

Read an article that said dark mode text contrast standards are too low right now

I was browsing web design blogs last night and found this piece from a UX researcher who tested the current WCAG contrast ratios for dark themes. They had 30 participants try to read gray text on black backgrounds and over half struggled after 10 minutes. That made me think about all the times I set text to like #999 on #111 and thought it looked good. Now I'm wondering if I should bump my contrast way up even if it makes the design feel less "dark mode". Has anyone else tested this with real users?

18

nina834•19d ago

Had a convo with a night shift nurse about dark mode colors

My neighbor Sarah works nights at the hospital and told me last week that most dark themes actually make her eyes strain more because of the contrast. She said blues and purples look cool but get blurry after 8 hours staring at screens. Anyone else had feedback from people who use dark mode for work not just browsing?

9

thomas_johnson35•20d ago

The day I switched from light gray to blue-gray for my dark mode backgrounds

I used to just pick a dark gray like #2d2d2d for all my app backgrounds. Then I saw an article that suggested a touch of blue, like #1e1e2e, to reduce eye strain. I tried it on a side project last month and the difference was noticeable after just a few hours of coding. The colors feel deeper and less harsh on my eyes, especially when I switch between screens. Has anyone else experimented with tinting their dark mode backgrounds to a specific hue?

13

sandra146•21d ago

Had to pick between pure black dark mode and a dark gray one for my app

I went with pure black because it looked cleaner in mockups, but now users are complaining about eye strain on OLED screens. Anyone else deal with this catch-22?

27

simonreed•22d ago

Unpopular opinion: pure black (#000000) backgrounds hurt more than they help

Had an accessibility specialist look at my dark mode app last month. They said pure black creates too much contrast strain and makes halation worse for people with astigmatism. I pushed back hard at first because I thought black looked cleaner. But after testing with a few users who had eye issues, it was clear they were right. I switched to a dark gray like #1a1a2e and the feedback flipped completely. Now I'm wondering how many other designers are stuck on pure black because it looks cool. What's your go-to hex for dark mode backgrounds?

6

tyler822•22d ago

Dark mode mistake I caught after 2 years of coding

I was building a dark theme for a dashboard and kept getting complaints about eye strain from testers. Turns out I was using pure black (#000000) for backgrounds the whole time. A UX buddy on Discord finally showed me that deep gray like #121212 works way better. Have any of you switched off pure black after thinking it was the right choice?

5

miller.paul•22d ago

Tried pure black backgrounds for a week and felt like my eyes were bleeding

Last Tuesday I switched my app design to #000000 because I thought true black looked cleaner. By Thursday my eyes were watering every time I looked at the screen next to bright white text. I swapped to a dark charcoal like #121212 instead and the contrast felt way easier to read. Has anyone else had this problem with pure black in dark mode?