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
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).
In a more recent study (Hill 1997?), researchers asked about the subjective perception of various color schemes. Subjects expressed that:
I’d like to refer you to an extremely well-written academic paper by Richard Hall. It includes:
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.
Also, get the lists of free vector software and free photo editing software.
End the return nightmare and make online shopping stress-free (more…)
Killer UX transforms dying businesses. See precisely how intuitive interfaces slashed operational chaos and turned…
Robots doing all your work sounds perfect—until they’re stuck in loops, grabbing random tweets, and…
Most emails are forgettable. Great ones hook you fast, look sharp, and drive clicks. Here’s…
We put top AI face swappers to the test—beards, glasses, head tilts, and more. Some…
Learn more about each step within the design process to improve your UX workflow.
This website uses cookies.