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.

About WD23

A digital web agency focused on UI/UX and strategic development.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from - Youtube
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google
Consent to display content from - Spotify
Sound Cloud
Consent to display content from - Sound