Text contrasts are a key point for website accessibility. They ensure maximum readability for people with permanent vision impairments (vision impairment, etc.), temporary impairment (fatigue, poor screen quality, etc.)… and all other people.
One thing that hasn’t changed much in the last 25 years is the importance of text contrast. While it is true that the early internet was overloaded with flashing banners, what many businesses did get right in the early days was effective contrast. Black text on a white background was and still is the most effective way to present text. The right contrast can make the difference between users clicking where you want them to go or navigating away from your website altogether.
Often out of ignorance, text contrasts are treated quickly, sometimes completely overlooked. However, they are very important for website accessibility and more broadly for the readability of websites. Moreover, once you know about it, this point is often easy to deal with, accessibility-wise, using CSS, and it brings great benefits.
Next to contrast calculation, other indicators are interesting: brightness and tone difference. The formulas to calculate the tone difference and brightness are also available. However given their complexity, explaining them in detail would require a much longer article.
It is recommended to have a brightness greater than or equal to 125 and a tone difference greater than or equal to 500 to ensure good readability.
Of course, we won’t do tedious calculations each time we need to evaluate the text and background colors, utilities can check this information for us… and of course enable us to correct accordingly.
