What is an accessible text on the web ?
A text is accessible if it can be read by any person, especially those with visual impairments such as color blindness, etc. ….
For a text to be accessible, it is important that the color between the screen background and the text has a sufficient contrast. These two examples speak for themselves, don’t they?
Which colors to choose ?
For anyone without visual deficit, the minimum color contrast level required for classic text is 4.5.
The text color and the background color must have a sufficient contrast level.
1- This level of contrast depends on the difference of luminance between the chosen colors. If you want to know more about these notions and the method of calculation, we recommend this article w3.org.
2- Sufficient level according to the digital accessibility standards. Here are the rules;
- For anyone without visual deficit, the minimum color contrast level required for classic text is 4.5.
For people with visual deficits, this minimum contrast level must be at least 7.
Below a ratio of 3, your text will be difficult to perceive.
Testing your colours manually
For most of the tools available on the web, the contrast ratio is automatically calculated from either your CSS (Webaim – Check Your accessibility) or the colors you enter manually (Coolors – Contrast Checker). Your ratio is not sufficient, what do you do ? You manually test different tones of your colors in order to find those with a sufficient contrast.
UXvizer +
It extracts the color of all your texts on your web interface and proposes alternative colors to raise your contrast level to 4.5 and 7 respectively in case it would be insufficient according to web accessibility standards.
2 minute timer to get started.
Like everything in UXvizer 😁 checking the contrast ratio of your interfaces is very easy. In less than two minutes, you can create an account, a project and upload a screen recording to be analysed or an image (.png, .jpeg).
From there, choose the “Visual Design Checker” test and wait while our algos run the analysis for you.
When they are done, just directly head to the “visual design checker” tab, click in the main menu on Contrast Ratio to see the detailed analysis appear.
Here is a quick demonstration :
Start testing your visuals today to see if your site is accessible !
👀 Keep Reading on accessibility :
https://www.uxvizer.com/2022/02/regle-n2-le-choix-de-la-typographie/
