Table of Contents
Colors are important as many of you may know. They play a significant role in the accessibility, user retention, and design conversion of a project.
Before exploring the optimal color combination for UI design, we must familiarize ourselves with some key terms.
What is color luminance contrast?
Luminance contrast is all about the difference in brightness between visual elements. Our eyes are highly skilled at detecting and differentiating these variations in brightness.
When it comes to human perception, luminance contrast holds more significance than hue differences. This is crucial because luminance contrast allows us to create content that is visible even to users with color blindness.
Vision fatigue versus readability
Vision fatigue and readability are not exactly the same thing. They are related concepts, but distinct in important ways.
Readability refers to how easily and comfortably text can be perceived and understood by readers. Elements like font size, typeface, contrast between text and background, and overall layout impact readability. It focuses on ensuring that text is clear and legible for users.
On the other hand, vision fatigue refers to the strain and discomfort experienced by our eyes during prolonged visual tasks, such as reading text on a screen. Factors like screen brightness, glare, text size, and color combinations can contribute to vision fatigue over time.
Although high readability is crucial for minimizing vision fatigue, they are not interchangeable terms. Text can technically be readable but still cause significant eyestrain if the visual presentation is poor.
Therefore, you need to take into account both readability and eye fatigue-reducing aspects of the color combination in the design.
Colors and readability
When it comes to readability, the luminance contrast between the text and the background is key, rather than the specific color combination.
There are no specific maximum thresholds for color contrast when it comes to readability. The higher the contrast between the text and background, the better the readability becomes.
This means that using pure white text on a pure black background or pure black text on a pure white background will achieve the best results in terms of readability. These extreme contrasts provide optimal legibility and ensure that the text stands out clearly against the background.
There is still debate surrounding the use of pure black text on a pure white background, as well as the reverse. Some argue that such extreme contrast can lead to eye fatigue and create an unbalanced design. While there are valid points to consider, studies have shown that higher text contrast actually improves user accessibility. It is only in specific situations that text contrast should be reduced, which I will discuss below.
Colors and vision fatigue
A recent study published in Behaviour & Information Technology examined the effects of various text-background color schemes on important outcomes. You can find the study here:
https://ieeexplore.ieee.org/document/9363189
Once again, the study demonstrates that higher contrast levels are more effective in reducing user eye fatigue.
Now, let’s address the concerns about pure black text on a white background. Some argue that this combination can cause eye strain and make it difficult for users to read for extended periods. The argument stems from the fact that white is 100% brightness while black is 0, creating a significant difference in color brightness that can lead to intense light levels overpowering the reader. Additionally, when scrolling, the eyes have to work harder to adjust.
My take is they are completely wrong about this.
Using lighter text is generally acceptable for younger individuals. However, as people reach middle age and beyond, their ability to adjust focus from far to near distances diminishes, and the lens of the eye undergoes a gradual hardening process that can lead to cataracts later in life. In this context, reading gray text for extended periods can cause eyestrain among older individuals, contrary to the experience of younger ones.
Not to mention, many eye conditions will cause problems when reading low-contrast text.
Of course, there is nothing wrong if the grey text has enough contrast according to APCA. However, reducing text contrast to increase accessibility is misleading and should not be encouraged.
Is high contrast ever the problem?
No, the issue lies not with high contrast itself, but rather with the poor design of many interfaces.
One common problem is the choice of fonts used for texts. Often, these fonts are not suitable for screens. The font size may be too small or its design is bad for readability. Increasing the font size is generally a good solution, but some fonts do not scale well.
Another issue is insufficient white space. When using high contrast, it is essential to increase the spacing between features such as borders, decorations, and icons.
The mentioned study also supports these points, highlighting that higher contrast leads to better results. On the other hand, low-contrast text can significantly contribute to eye fatigue. This is because low contrast requires the pupils to dilate more to perceive the text clearly, leading to visual strain over time. Moreover, low contrast makes it harder to focus on and resolve the text, reducing visual acuity and increasing the cognitive load, thus contributing to visual fatigue.
On the other hand, the high-contrast text allows the visual system to operate more efficiently, reducing strain on the eyes and visual processing, and minimizing visual fatigue. Therefore, maximizing the contrast between text and background is an important design consideration for displays with negative polarity, aiming to minimize visual fatigue for users.
The truth for “high contrast” and “light mode” cause eye fatigue
The debate between light on dark versus dark on light is not definitively settled in the scientific community. There are advantages and personal preferences associated with both options and ambient conditions also play a significant role. Exploring this topic in depth would require a more comprehensive article.
Furthermore, it is worth noting that many issues often attributed to “excessive contrast” are actually related to “excessive luminance.” You can read more about the problem in this study.
https://www.thinkmind.org/articles/achi_2024_3_150_20069.pdf
In summary, the main finding is that dark mode on smartphones can help reduce eye fatigue, but this benefit is primarily observed in bright ambient lighting environments. The display polarity (dark vs. light mode) did not have a significant impact on eye fatigue in dim lighting conditions.
While the sample in this study is small and may need larger-scale tests to produce more trustworthy results, it’s still consistent with some of the studies in the literature on how reducing excessive luminance will reduce eye fatigue such as:
T. Sethi and M. Ziat, “Dark mode vogue: Do light-on-dark displays have measurable benefits to users?” Ergonomics, vol. 66, no. 12, pp. 1814–1828, Dec. 2023.
X. Xie, F. Song, Y. Liu, S. Wang, and D. Yu, “Study on the effects of display color mode and luminance contrast on visual fatigue,” IEEE Access, vol. 9, pp. 35 915–35 923, 2021, publisher: IEEE.
The reason for low contrast design
While it’s not desirable but low low-contrast text still exists in many designs nowadays for some reasons:
Aesthetics
Low-contrast text designs may be used for aesthetic purposes, even if they are less optimal from a visual fatigue perspective. Some designers may prioritize a certain visual style or mood over maximizing contrast.
Easing the eyes
Another potential reason is the idea that low-contrast text could be “easier on the eyes” in some situations. While the research indicates high contrast is better for reducing fatigue, there may be a perception that softer, lower-contrast designs are more soothing or comfortable to look at.
Take note that users may prefer some color contrast but that doesn’t mean that the contrast is optimal for them.
Establish visual hierarchy
When it comes to labels or other short-form content that doesn’t require much attention or reading time, designers often de-emphasize it by using a smaller font size or reducing the color contrast.
Other contextual factors
There may be other contextual factors, beyond just aesthetics and eye strain, that influence the choice of low-contrast text designs in certain applications. For example, following brand guidelines or stakeholder’s preferences,…
Working as a designer, you must compromise between options. In other words, you have to balance between business goals and user goals.
For people with dyslexia
Some people with dyslexia have reported seeing unstable or “jumpy” letters when using high-contrast settings. And that is the only valid reason for having low contrast mode. However, we don’t fully understand the specific impact of this phenomenon, and there is variation among individuals, source: https://www.sciencedirect.com/science/article/pii/S0042698900000419
So we can say it is still difficult to establish a direct link between contrast sensitivity and dyslexic reading performance.
Moreover, reducing text contrast may enhance the reading experience for individuals with dyslexia by reducing visual strain, this approach comes at the cost of diminishing the reading experience for those without dyslexia.
My suggestion is to set high contrast as the default option. To assist users, we can provide a function that allows them to reduce text contrast. This can be achieved by offering alternative themes or incorporating a slider to adjust the contrast level.
Solution
There is nothing wrong with pure black text on a pure white background. I recommend starting with a high-contrast design as default. If you want to have a low-contrast mode, you can give users the option to change to that from a high-contrast mode.
Always use minimum contrast according to APCA.
When users have to use the product for a long time, for many hours, you can consider providing the ability to switch to dark mode.
In the case where text is not the main point in the design, for example, when you have other elements, you can reduce the contrast to make the design more balanced.
What color combination is best for accessibility?
When it comes to accessibility, the best color combination is typically black text on a white background. This high-contrast pairing ensures clear visibility and readability for most individuals. This combination is preferred by both people with and without dyslexia.
However, if you want to reduce screen luminance, there are alternative options. Instead of using pure white, you can consider using off-white, light yellow, and creme as the background color. These alternatives can help lower the overall brightness while still maintaining a sufficient level of contrast for readability.
