In order to achieve maximum contrast in design, interface designers often use a combination of pure black and white colors, which helps create visual depth with clear boundaries and effectively highlight key elements such as text, buttons or icons. Pure Black (#000000) has 0% color brightness, while white is 100% bright (#FFFFFF) is 100%. The significant difference in color brightness causes discomfort and strain on the user’s eyes and leads to rapid eye fatigue when viewing content on the device for extended periods. On the one hand, the contrast of black and white colors gives maximum clarity for the human eye improving visual acuity, but on the other hand, prolonged exposure forces the retina to constantly adapt to the sharp difference in brightness, begins to experience strain. Therefore, when designing solutions, it's important to ask yourself the question future design is oriented on aesthetics or on the convenience of users. In User-Centered Design (UCD), it’s important to consider how the colors chosen affect users, especially those who may have vision problems.
“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” Jared M. Spool
When the design is "Good", users don’t notice it — the interface becomes comfortable and intuitive, allowing them to perform tasks without distraction. But if the design causes discomfort, for example because of sharp contrast, unreadability, it becomes noticeable and distracting, and it’s more likely that the user will have a negative experience from using your product, or will stop interacting with it altogether.
Why you should never use pure black for text or backgrounds
Although black text on a white background is a traditional and popular solution that provides readability due to high contrast, it has its drawbacks, such as eye strain caused by prolonged interaction with the text, especially for people with sensitivity to bright light or contrast. Here are some reasons why it’s bad for users:
1. Eye Strain when scanning text content on digital devices
It's important to consider the difference between printed materials and device screens. When reading black text on white paper in books and magazines, we see an improvement in readability, but in the case of digital devices, users interact with the brightness of the screens that display the text for long periods of time, which affects the retina of the eye, which in turn causes general fatigue. This happens because the eyes have to constantly adapt to the bright background, which causes an unnatural and uncomfortable feeling of “glare”. Also when scanning light objects on a dark background, which requires more effort and strain, especially when reading for long periods of time.
2. Halo effect when reading white text on a black background
Pure white text on a black background should be used sparingly in design. In users with astigmatism it can cause a distracting halo effect around the text. A halo effect is when a blur of light surrounds the brightness amid the darkness. This may affect people with myopia (nearsightedness), astigmatism (an irregularity in the curvature at the front of the eye), or presbyopia (an age-related decline in ability to focus on things that are near the eyes).
According to Statistics, approximately 50% of the population suffers from some form of astigmatism. According to the American Optometric Association, about one-third of the U.S. population has some degree of astigmatism. This means that millions of Americans experience the blurred or distorted vision associated with this condition.
A study published in the journal Ophthalmology found that more than 70% of children aged 5 to 17 have astigmatism. The Contact Lens Council reports that almost 45% of all contact lens wearers in the United States have astigmatism.
Accessibility
When choosing colors for a design, it’s crucial to take into account the needs of users depending on their visual abilities, it's necessary to find a balance between the benefits of high contrast for users with low vision and the negative impact of high contrast for users with normal vision. For visually impaired users who have residual vision but not total blindness, high contrast between text and background is critical, in which case black text on a white background or white text on a black background provides the necessary contrast and clarity. While for users with normal vision, excessive sharpness causes tension and discomfort.
So where is the middle ground or compromise in this matter? One solution that can help solve this dilemma is to include a high contrast mode in the product with the ability to enable it in the accessibility settings for visually impaired users. We can find examples of this in iOS (“Smart Invert” and “Dark Mode”), macOS (“Invert Colors” and “Increase Contrast” Mode), Google Chrome (“High Contrast” Extension), YouTube (High Contrast Subtitles).
Pure black text on white background
The use of black text on a white background has been popular long before the advent of computers and digital devices. In the 18th and 19th centuries, books, newspapers and magazines and other printed matter used a black and white color palette because it was readable and accessible. As we moved into the digital age, this pattern continued on computer screens and other devices, and black text continues to be read by users on platforms and online resources. An alternative approach is to use softer, moderately saturated dark gray, dark blue, and other dark shades, provided that readability and sufficient contrast are maintained, which will reduce strain on the user’s eyes and create natural and comfortable conditions for scanning content, while maintaining a touch of sophistication.
White text on a black background
A classic example of a dark background and light text is dark mode. Recently, dark interface mode has become increasingly popular, and many companies and platforms are incorporating this feature for their users. In report “Dark Mode Usage Statistics: Users Optimize Battery, Reduce Eye Strain” Alexander Eser provides some interesting statistics about dark mode for 2024 year:
- 82% of smartphone users prefer dark mode.
- Dark mode reduces eye strain for 93% of users.
- 89% of users find dark mode easier on the eyes in low-light conditions.
- 55% of desktop users prefer using dark mode.
- 67% of macOS users are using dark mode.
- 75% of Android users enable dark mode on their devices.
- 61% of iPhone users prefer using dark mode.
- Dark mode is favored by 78% of email users.
- 83% of Twitch users use dark mode.
- Dark mode can help reduce symptoms of digital eye strain by 35%.
An alternative solution may be to use light text in varying shades within acceptable contrast levels, creating a visual hierarchy that allows users to easily distinguish important design elements from less important ones. Thus, the user will visually scan text content in soft light colors without experiencing discomfort and will focus on important information.
Alternative colors for pure black in design
Based on my personal research and consultations with fellow designers, I have developed a color palette of alternative shades that can be used in design instead of pure black (#000000). These colors provide a less saturated appearance to text content, using charcoal grays and other dark tones to maintain essential readability while reducing contrast against a light background and reducing eye strain when interacting with content for long periods of time. The purpose of this research was to find the most effective shades for modern interface design.
For your convenience, I have listed all the colors from the palette with their codes below. Just copy and apply the code you want instead of pure black:
1. Charcoal Gray | Hex #121212
2. Dark Slate Gray | Hex: #191919
3. Outer Space | Hex: #252525
4. Rich Black | Hex: #0A0A0A
5. Coffee Bean | Hex: #1B1B1B
6. Dark Gray | Hex: #212427
7. Oil Black | Hex: #0C0C0C
8. Obsidian | Hex: #0B1215
9. Ebony | Hex: #222428
10. Black Chocolate | Hex: #100D08
11. Gunmetal | Hex: #1D1F21
12. Smoky Black | Hex: #101720
13. Oxford Blue | Hex: #212A37
14. Eerie Black | Hex: #232023
15. Jet Black | Hex: #161618
16. Iridium | Hex: #181818
17. Arsenic | Hex: #11181C
18. Charleston Green | Hex: #212124
19. Dark Gunmetal | Hex: #222428
20. Jet | Hex: #2A2A2A
21. Black Olive | Hex: #242526
22. Midnight Blue | Hex: #212121
The Take Away
When designing solutions for digital products, we as designers must take into account the needs of users, create interfaces that will be comfortable for users with normal vision and take into account accessibility for users with visual impairments. Create “Good designs” without distracting users from interacting, making the user experience seamless and enjoyable, even over long interactions. Using pure black text on a light background or white text on a black background is not right or wrong, but given the current trends in user needs, taking care of them is important to look for alternative solutions that will accommodate and improve the experience.
.png)
