Why you should never use Pure Black and White

When I first started working as designer, I often defaulted to using #FFF for white and #000 for black. These Pure Colors, devoid of any hue, represent the extremes of brightness and darkness on an RGB screen but, along the way, I discovered that relying on them isn't always the best choice.

Let's explore why stepping away from these default choices can enhance our creative outcomes and how we can learn from this shift.

Pure black on a white background

A pure black text on a white background can sometimes strain your eyes. It's interesting because the contrast is so stark—white at maximum brightness and black at zero. This intense difference can be overwhelming, especially during long reading sessions where your eyes constantly adjust to the light changes as you scroll through.

I'ts similar to suddenly lighting up a dark room; the shadows become stark, and the abrupt change can be uncomfortable, particularly at night when your eyes are more sensitive.

Reading in dim light feels more comfortable, as your eyes better adjust to the subtle variations. It's like the gentle glow of a faint light in a dark space, which provides just enough illumination without being overpowering.

When opting for dark gray text on a white background instead of black, the subtle difference in brightness enhances the visual experience. This adjustment not only minimizes eye strain but also promotes prolonged reading comfort for users, ensuring a more pleasant interaction with the content.

Scientific research suggests that using white text on a black background can stimulate the "ON" cells in the eyes more effectively than black text on a white background, aiding readability for some individuals. A recent study by a team of scientists proposes that "white text on a black screen could help deter myopia, while black text on a white background might encourage myopia." It is recommended to avoid reading exclusively in dim environments to mitigate potential disruptions from polarization and contrast effects.

It's good to know that some visual conditions and eye issues might actually benefit from using white text on a black background. For instance, people with astigmatism might find this setup easier on their eyes since it cuts down on light scattering, which often leads to blurriness. Likewise, those who have photophobia or light sensitivity might opt for darker screens because they emit less light, making them less likely to cause discomfort or pain. By tweaking the color contrast to fit individual visual needs, you can make reading more comfortable and help prevent extra strain.

Designers need to find the right balance by offering both light and dark modes. This approach lets users pick what suits their visual preferences and environment. By giving this flexibility, designers can reach a wider audience and highlight the importance of user-centered design in making digital platforms more readable and comfortable.

I discussed modes in this article: Light and Dar mode: why only 2 modes

Pure White on a black background

Steer clear of using pure black backgrounds in designs as they may impede readability. A pure black backdrop absorbs all light emitted, placing strain on viewers' eyes. With light reflecting at different angles on screens, it compels the eyes to exert more effort and dilate. This scenario can result in "halation," where white text blurs and bleeds on black backgrounds.

Choose a dark gray background to boost lighting and enhance reading endurance.

High contrast for accessibility

Pure black text is typically considered safe for users. Individuals with low vision, who may not be legally blind but struggle with visual impairments, often find plain black text or white text on a black background more comfortable for reading.

When designing for users with color blindness, it can present challenges. However, there are various techniques available to provide assistance. In accessibility mode, it may be beneficial to choose pure black over dark gray. It's also important to address the requirements of users with normal vision throughout the design process to ensure inclusivity and usability.

Enhance readability through balanced contrast

High color contrast is essential for readability, playing a crucial role in ensuring text legibility by directly impacting the user's eyes. Striking the perfect balance between text and background contrast is vital; it should be clear without being overly light or dark.

If you ever feel unsure about your contrast levels, it's recommended to use the Color Contrast Checker to determine the optimal range for your content. This tool focuses on pinpointing high-contrast issues that could impede visibility for some users. If it detects a contrast problem that may create challenges for certain individuals, the tool notifies you promptly.

Whether you choose black and white or other colored text, always think about the user's experience. Prioritize designs that lessen eye strain, as this significantly improves the user experience. For example, ensuring images are large and crisp supports prolonged reading with minimal eye strain.