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?
- Different opinions
- Different research that uses different methods and leads to different conclusions
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).
- Black and white were consistently rated as most readable
- Color combinations that included black were rated more readable than those that did not
- Darker text on lighter backgrounds were rated higher than lighter text on darker backgrounds
- Some further research on retention
- Surprising performance of green on yellow
- Formulas for ensuring enough contrast
About the Author
Ivan Boyko 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.