Just realized my dark mode designs were ruining readability for my friend with astigmatism

I was showing a mockup to my buddy Mike last week (he's a front-end dev at a startup in Austin) and he straight-up told me my dark mode looked terrible on his phone. I thought I was being clever with a pure black background and thin white text, but he said it made everything blurry and his eyes hurt after like 5 seconds. He explained that people with astigmatism (which is like 30-40% of the population apparently) struggle when dark backgrounds have too much contrast between the background and the text. So all those #000000 backgrounds with #FFFFFF text I was so proud of? Yeah, apparently that creates something called halation where the text looks like it's bleeding into the dark. He showed me an article from a UX research site that recommended using dark grays like #121212 instead of pure black and avoiding high-contrast text sizes below like 14px. Has anyone else had to totally redo their color palette after finding this out? I'm wondering if there are other accessibility things I'm missing with dark mode that I never even thought about.

1 comments

1 Comment

gonzalez.phoenix13d ago

dark grays are just easier on everyone's eyes honestly.