Choosing background and text color

For a number of years pale grey text on a white background, or white text on a light grey background were something common. Before you decide what colors you’ll be using for your text background and your main text, we urge you to reconsider.

Text should have sufficient contrast with its background. Not everyone perceives colors the same way you may perceive them, so it’s important to take everyone into account.

You should not use a dark background with light-coloured text for your main content. It has been proven that a reversed color scheme decreases readability and focus, making it harder for the majority of users to properly concentrate and consume content. That’s not to say that you should never use a dark background with light text. A reversed color-scheme may be used in some areas of a website like for example menus since the volume of content there is limited and the change in contrast makes it clear that it’s a different section, not to be confused with the main site’s content area.

You may be tempted to use black text on white background. After all, it guarantees a high contrast and it’s what books have been doing for decades. However, there’s a huge difference between print and a screen; paper reflects a portion of the light it gets, while screens generate light. As a result, screens are a lot brighter. Bright light is annoying to many people and doesn’t help when it comes to allowing them to effortlessly consume content. For other people (including myself), bright light can triggers migraines.

So what are the perfect colors to use for background and text colors? Unfortunately there is no “perfect” solution. But you can use this as a guideline: Start with black text on white background, and then try to tame these 2 extremes and go for a light grey background and dark grey text. My personal preferences are #f2f2f2 for background and #222 for text but feel free to experiment and find a balance you’re comfortable with.