Home / Notes /

Set both background and text colours on your site

A screenshot of a page on kickstarter.com. The background colour is a dark grey, and the text is also dark grey. This combination makes it extremely low contrast and hard to read the text.

Web designers, did you know that the default web text and background colours you're relying on in your sites – black text on a white background – aren't actually fixed? They're user settings, which many users like me can and will change.

I set my browser up with a dark background and light text by default, and ever since, I've encountered dozens of websites that set the text colour explicitly in the CSS, but just assume that the background will be white, and don't set it manually.

If you are changing the background colour of any element on the web from the browser's defaults, you need to make sure you also set its text colour, and vice versa.

You can't assume that text will always be dark and the background will always be light by default.

A screenshot of a page on macworld.org. The background colour is a dark grey, and the text is also dark grey. This combination makes it extremely low contrast and hard to read the text.