Dark website or light? It is one of the first design questions owners ask, and it matters less than people think. What matters is whether visitors can read it, find the buttons, and trust it. Either one can do that. Either one can fail.
Readability comes first
The accessibility guidelines most of the web follows, known as WCAG, ask for a contrast ratio of at least 4.5 to 1 between normal text and its background, and 3 to 1 for large text. Black on white is about as high as it gets. Light gray on white, and mid gray on dark gray, often fail.
You do not have to guess. Free tools like the WebAIM contrast checker give you the ratio for any two colors.
Think about where people look at your site
A customer checking your site outside in bright sun needs strong contrast. Dark sites with faint text are hard to read in glare. Bright white sites can feel harsh at night. Neither is wrong, but thin, faint text is wrong on both.
When light works well
- Businesses where clean and bright fits the work: cleaning, medical, dental, family services.
- Sites with lots of reading, like menus, price lists and long guides.
- Product photos shot on white, which can look boxed in on a dark page.
When dark works well
- Brands that are bold or moody by nature: barbers, tattoo shops, auto and performance work, bars, music.
- Portfolios, where dark lets photos stand out.
- Sites people mostly use at night.
This site is dark because it fits the brand. Plenty of the sites I build are light. The work page has both.
One color for action
Whatever the background, pick one strong accent color and save it for the things you want people to do: call, book, get a quote. If everything is orange, nothing stands out.
Details that make a difference
- Body text at 16 pixels or more, in a plain, readable font.
- Comfortable line lengths. Very wide paragraphs are hard to follow on a big screen.
- No long runs of body text in all capitals or italics.
- Links that look like links, and buttons that look like buttons.
Get those right and the light or dark question mostly answers itself: pick the one that suits your business and your photos. For how the site should feel in the hand, see mobile first design.
