What is the best background color for a website?

01Why light backgrounds are the default

Reading research favors dark text on a light background for people with normal vision. Nielsen Norman Group's review of the studies, in Dark Mode vs. Light Mode, describes a 2013 study in which participants performed better on reading and proofreading tasks in light mode, and found the advantage grew as text got smaller. Participants did not notice the difference, even though their performance showed it.

That is why most content-heavy sites (news, documentation, shops, blogs) use light backgrounds. It is not a fashion; it is what makes small text easiest to read for most people.

02White, off-white or something else?

03When a dark background is the right call

Dark backgrounds work when the content is visual (photography, film, product renders), when the brand wants drama or luxury, or when the audience reads late at night. They need care: white text on black tends to look thinner and can glare, so increase font weight or size slightly and use a soft near-white rather than pure white text. Nielsen Norman Group recommends offering dark mode as an option rather than forcing it on a general audience; should my website have dark mode? covers that choice.

04Contrast rules every background must meet

Whatever color you pick, body text needs a contrast ratio of at least 4.5:1 against it, and large text at least 3:1, under the Web Content Accessibility Guidelines described in the W3C's contrast guidance. Mid-tone backgrounds are the riskiest because neither black nor white text reaches strong contrast on them.

1. 1Pick the backgroundLight, off-white or dark, based on brand and content.
2. 2Pick the text colorNear-black on light; soft near-white on dark.
3. 3Test the pairUse the contrast checker for body text, secondary text and buttons.
4. 4Check images with text on themAdd an overlay or a solid panel behind text placed on photos.

05Backgrounds to avoid

Busy photos or patterns behind paragraphs, bright saturated colors behind body text, gradients that change contrast across the page, and textures that look like noise on small screens all make reading harder. Use them for small, decorative areas such as a hero or a divider, never under the text people need to read.

If you are choosing the whole palette rather than just the background, how many colors should a website have? explains the roles, and the color palettes collection has tested combinations with backgrounds already chosen.

• Busy images under text: use an overlay or move the text.
• Pure black with pure white text: soften both slightly.
• Bright color sections: keep them short, with large text only.