When designing, you've likely relied on #FFF for white and #000 for black. These specific colors, referred to as Pure Colors, are devoid of any hue. They represent the extreme brightness and darkness achievable on an RGB screen. However, the usage of these colors is discouraged for several reasons. Let's delve into why avoiding them can lead to more visually appealing and balanced design outcomes.

Pure black on a white background

Using pure black text on a white background may strain the eyes due to the stark contrast between the two. White represents maximum brightness at 100%, while black is at 0%, creating a significant difference in brightness levels that can overwhelm the reader with excessive light. This high contrast can lead to eye strain, especially during prolonged reading sessions, as the eyes constantly adjust to the changing levels of light while scrolling through content.

Illuminating a dark room with a bright light accentuates the shadows significantly, creating a stark contrast. This abrupt adjustment can strain your eyes due to the sudden change in lighting conditions, making it unwise to tinker with lighting in the nighttime when your eyes are more sensitive. However, reading in dim light is often preferred as our eyes adjust better to subtle light variations, similar to the gentle glow emitted when we switch on a faint light in a dark space, providing just enough illumination for comfortable reading.

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 important to recognize that specific visual conditions and eye diseases may benefit from white text on a black background. For example, individuals with astigmatism may find white text on a black setting easier on the eyes because it reduces light scattering, which often causes blurriness. Similarly, those with photophobia or light sensitivity might prefer darker screens as they emit less light, decreasing the chances of discomfort or pain. By adjusting the color contrast to suit individual visual needs, reading comfort can be significantly improved and further strain prevented.

It is essential for designers to strike the perfect balance by providing two modes - light and dark. This strategy allows users to choose the mode that aligns with their visual preferences and surroundings. By offering this flexibility, designers can accommodate a broader user base and underscore the significance of user-centered design in enhancing readability and visual comfort on digital platforms.

For instance, my website adapts to the mode that you, the visitor, have set on your device. This ensures that whether you prefer dark mode to minimize eye strain or light mode for clearer visibility under bright conditions, your reading experience remains comfortable and personalized. This adaptability showcases our commitment to accessibility and user preference, making digital content enjoyable for everyone.

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.

For those, like myself, who work with Figma for web or mobile design, I highly recommend installing Contrast. This application, available for download on Figma, offers valuable assistance in effectively managing contrast.

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.