Categories: UX

White Text on Black Background: Will it Get You Fired?

In website design, what are the pros and cons of dark text on light backgrounds vs light text on dark backgrounds, and is one better than the other?

Is it strictly a subjective design choice, or are there marketing and/or psychological UX benefits to choosing light on dark over dark on light?

Black on white is a safe choice.

Even then, we’ve got

  • Different opinions
  • Different research that uses different methods and leads to different conclusions

Gurus

Jacob Nielsen suggests:

“Use colors with high contrast between the text and the background. Optimal legibility requires black text on white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly”.

In pre-web times, one study failed to find any significant difference in performance among 24 different color combinations in a text search task (Pace 1984). On the other hand, regardless of the specific color combination, higher levels of contrast appear to lead to better readability (Bruce and Foster 1982; Radl 1980).

Research

In a more recent study (Hill 1997?), researchers asked about the subjective perception of various color schemes. Subjects expressed that:

  1. Black and white were consistently rated as the most readable
  2. Color combinations that included black were rated more readable than those that did not
  3. Darker text on lighter backgrounds was rated higher than lighter text on darker backgrounds

Further Reading

I’d like to refer you to an extremely well-written academic paper by Richard Hall. It includes:

  • Some further research on retention
  • Surprising performance of green on yellow
  • Formulas for ensuring enough contrast

Like the article? Please share your opinion in the comments!

About the Author: Ivan Braun is a founder of Icons8. He got his first job after drawing a banner with CTR of 43%. After years of creating icons, he specializes in rapid prototyping and backlog grooming.

Try free tools for creators by the Icons8 team

Icons8, a library of about 120K+ free icons and free clip art images
Lunacy, free graphic design software with built-in design resources
Photo Creator, free collage maker with AI-based technologies to make custom photos for your story
Fugue, royalty free music for videos of any kind
Pichon, the desktop app to download icons and clip art and use them offline
Icons8 Photos, the big collection of free stock photos designed to work together
Ouch!, a library of free vector illustrations


Also, get the lists of free vector software and free photo editing software.

icons8

Recent Posts

I tested 11 AI website builders: are they the future or just a cheap design shortcut?

Think AI can build you a perfect website in seconds? I spent weeks testing the…

2 weeks ago

10 mockup resources that’ll make your clients throw money at you

Clients don't buy pixels—they buy vision. 10 mockup resources that'll transform your design presentations from…

3 weeks ago

Advanced prototyping, new font picker and file organization: Lunacy’s feature-packed update

Meet the Lunacy 11! Here's a rundown of the exciting features we've added to enhance…

3 weeks ago

Fashion retailers, end the return nightmare

We built an AI clothes changer to outfit over 70,000 football players. Now, we’re ready…

4 weeks ago

Dominate or die: how UX design destroys outdated processes

Killer UX transforms dying businesses. See precisely how intuitive interfaces slashed operational chaos and turned…

1 month ago

I spent $200 on ChatGPT Operator so you don’t have to (Seriously, don’t)

Robots doing all your work sounds perfect—until they’re stuck in loops, grabbing random tweets, and…

1 month ago

This website uses cookies.