butchorpeza.comDark mode looks modern, but research summarized by Nielsen Norman Group shows people with normal vision tend to read better in light mode. Use dark designs for brand impact and offer light text with enough contrast, avoid pure white on pure black, and respect the visitor's system preference.
- Light mode often performs better for reading in people with normal vision.
- Dark mode suits brand impact, media and low-light use.
- Avoid pure white text on pure black; soften both.
- Keep contrast high enough to meet accessibility guidelines.
- Respect the visitor's system setting with prefers-color-scheme.
Who this is for
Designers and brands considering a dark website.
Why I wrote it
My own brand is black and white, so I balance dark sections with readability.
What you will get
Clear rules for dark designs that still read well.
Table of contents
- Introduction
- Dark looks premium
- But readability comes first
- What the Research Says
- Light mode often reads better
- So offer the right balance
- Rules for Good Dark Design
- Soften the extremes
- Keep contrast strong
- Use space generously
- Respect the Visitor\'s Choice
- Follow the system setting
- Test both versions
- Conclusion
- Dark for impact, light for reading
Introduction
Dark looks premium
Dark websites feel bold and modern. My own site uses black heavily, because it fits my brand.
But readability comes first
Looking good and reading well aren't the same thing, and dark designs need extra care.
What the Research Says
Light mode often reads better
Nielsen Norman Group's review of the research found that people with normal vision tend to perform better with light mode, while some people with certain eye conditions may do better with dark mode.
So offer the right balance
That's why many good sites use dark sections for impact and lighter sections for long reading, like this article.
Rules for Good Dark Design
Soften the extremes
Pure white text on pure black can feel harsh. Slightly off-black backgrounds and slightly softened white text are easier on the eyes.
Keep contrast strong
Grey text on black often fails contrast guidelines. Test your colors with a contrast checker.
Use space generously
Dark layouts feel crowded faster. More spacing and fewer elements keep them calm.
Survey and data source: Nielsen Norman Group research review and the WebAIM Million 2026
Respect the Visitor\'s Choice
Follow the system setting
The CSS media query prefers-color-scheme tells you whether someone uses light or dark mode on their device. You can adapt your design to match.
Test both versions
If you offer both modes, check images, logos and buttons in each one. Transparent logos often disappear on the wrong background.
| Factor | Light design | Dark design |
|---|---|---|
| Long reading | Usually easier | Harder over time |
| Brand impact | Clean and calm | Bold and dramatic |
| Contrast risk | Light grey text | Dark grey text |
| Best use | Articles, documentation, forms | Heroes, media, showcases |
A black-and-white brand
A portfolio uses a black hero and black cards for impact, but switches to white backgrounds for articles and long service descriptions so visitors can read comfortably.
Conclusion
Dark for impact, light for reading
Use dark where it strengthens your brand, keep long text easy to read, and let visitors choose when you can.
References
FAQ
Is dark mode better for your eyes?
Not necessarily. Research suggests light mode often gives better reading performance for people with normal vision.
Should my website have a dark mode toggle?
It's a nice option, especially for apps and documentation. At minimum, make sure your design is readable.
What colors work best for dark mode?
Off-black backgrounds with softened white text and one or two accent colors.
Who is Butch Orpeza?
Butch Orpeza is a Philippines-based creative technologist: a web designer, developer, 3D artist and AI automation specialist. He builds WordPress and Elementor websites, creates photoreal 3D product images, and sets up AI workflows that let teams hand repetitive work to AI agents.
Leave a comment
No comments yet. Be the first to share your thoughts.