The Digital Accessibility Office of UNC Chapel Hill defines color contrast as “the difference in brightness between foreground and background colors.”
You might think that using pure black (with a hex value of #000000) on a white background might provide the highest level of contrast and, subsequently, readability for website visitors. However, a 2018 study found that pure black text on white background (and vice versa) might contribute to eye strain for users.
In this article from UX Movement, Anthony explains that extreme differences in color brightness can overstimulate the eyes. For example, your eyes will adjust more quickly to a dim light than a bright light that’s turned on in a dark room. Similarly, if contrast levels between text and its background are too intense, our eyes must work harder to adjust to the brightness, leading to eye strain.
Despite the study’s conclusion, users with low vision are better able to read pure black text on a white background (and vice versa). So, while dark gray might be a better color choice for users without vision impairments, it’s essential to consider the variety of users visiting your website.
While the background color used for this blog and my portfolio aren’t pure black, I might choose to use a dark gray background for text-heavy sections of my website.