Dark website or light? Owners ask me that early, often before we talk about anything else. It matters less than people think. What matters is whether a customer can read it, find the button and trust it. Either one can do that. Either one can fail.
Readability comes first
The accessibility rules most of the web follows, called 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 goes. Light gray on white fails a lot. So does mid gray on dark gray.
You do not have to guess. Free tools like the WebAIM contrast checker give you the ratio for any two colors. Check your body text, the text on your buttons, and any words sitting on top of a photo.
Picture where your customer is standing
A lot of site visits around here happen outside. A homeowner in a Gastonia driveway in July, looking up a roofer in full sun. A parent at a ballfield in Denver checking if a shop is still open. Someone in a dark parking lot at night, looking for a locksmith's number.
Faint text fails all three. Dark sites with thin gray text wash out in glare. Bright white sites feel harsh at night. Strong contrast and plain, solid type work in both.
The Freedom Locksmith site is a good example. People often look at it at night, standing next to a locked car. So the first screen is the name, what they do and the number, big, and we checked it on three phone sizes before it went live.
When light works well
- Work where clean and bright fits: cleaning, medical, dental, family services.
- Pages people read a lot of, 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 by nature: barbers, tattoo shops, auto and performance work, bars, music.
- Portfolios, where dark lets the photos stand out.
- Sites people mostly use at night.
Most good sites are a bit of both
Light or dark is often a false choice. Two sites I built close to home show it.
Bar-B-Q King in Lincolnton has a dark header and a light cream page under it for the menu. A full menu with prices is a lot to read, and dark text on a light page is easy on the eyes. The yellow from their sign is saved for the call button.
Smith Mine in Maiden works the same way. A dark bar up top, light pages and white cards for the price calculator, and one rust color for every button that gets a price or makes a call.
The header carries the mood of the brand. The parts people read stay light.
One color for action
Whatever the background, pick one strong accent color and save it for the thing you want people to do: call, book, get a price. If half the page is orange, nothing stands out.
A quick test: hold your phone at arm's length and squint at your home page. The first thing your eye lands on should be the call button.
Color is only half of it
Text size, line length and buttons big enough for a thumb matter just as much. I cover those in mobile first design. If you want motion or effects on a dark page, animation on a business website covers what helps and what hurts.
How I handle it on a build
Every site I build starts from a blank file in your colors, so light, dark or both is a choice we make together on the free preview of your home page. You see it before you pay anything. Websites start at $795, and the websites page has the rest.
