What are the objectives?
Make it easier to see the content for everybody.
The contrast ratio’s objective is to get enough contrast between the text and its background, with the aim that everybody can read it.
How to implement your contrast ratio?
Main rules of a text:
The Web Content Accessibility Guidelines (WCAG) propose a series of recommendations for making the web more accessible.
Regarding colors, the standard defines two levels of contrast:
- AA (minimum contrast)
- AAA (enhanced contrast).
Usually, we speak about the contrast ratio in the form of: the value:1 (for example 4,5:1). Here, to make writing easier, we will only use the value alone (for example 4,5:1 is now 4,5).
The level AA requires a contrast ratio of at least 4.5 for small text and 3 for large text (at least 18pt) or bold text.
The level AAA requires a contrast ratio of at least 7 for small text and 4.5 for large text or bold text.
Explanation Contrast ratio and visual acuity:
The visual acuity is a criterion of a good vision based on the perception of the contrast between a text and its background.
People with 20/40 acuity visuals can see 20 feet away what people will see 40 feet away.
The requirements of contrast ratio increased in the same time that the visual acuity decreased, in order to compensate for it and allow everybody to get sufficient contrast between the text and the background.
The standard [ARDITI-The FAYE] explains a 20/40 visual acuity is equivalent to a loss of sensitivity to contrast of 1,5. Also, if people with a good visual acuity need a contrast ratio of 3:1, People with 20/40 acuity visual need 4,5:1 (calculation details: 3*1,5 =4,5 for 1)
Hence, the rules are linked to standard [ISO-9241-3] and [ANSI-HFES-100-1988].
To go further:
- The colors: Colors tint and saturation aren’t key factors in the contrast calculation. Some people have difficulty perceiving colors. That’s why contrast calculation is made taking into consideration the limitation of color, so as all people can get a sufficient contrast between the text and the background.
- Text’s typography: The size and style of the text are considered to calculate the contrast because some typographies are less readable than others.
- The large text: It designs the text with a minimum font of 18 points or 14 bold points. This kind of text can work with a low contrast ratio because its characters are large and easy to read. This leaves more possibilities in the choice of color.
- The thin text: Fonts with slimmer character drafts or more handwritten styles can be more difficult to read. Therefore, they have to work with a string contrast ratio to be readable.
- The decorative text. It designs the text that doesn’t carry any information. Its goal and its presence are only aesthetics. Therefore, this text can easily be replaced by other words. It is often used in the background. It can work with a low contrast ratio insofar as we want to enhance the aesthetic aspect rather than the text’s readability.
- The logotypes: There is no exigency of contrast for this kind of text, because readable or not it has a style specific to the brand identity.
Review
How to calculate a contrast ratio?
The formula to calculate is (L1 + 0,05) / (L2 + 0,05) with :
- L1: The relative luminance of the lighter of the colors.
- L2: The relative luminance of the dark of the colors.
The relative luminance is the brightness of a point in a color space. It’s between 0 (the darkest black) and 1 (the lightest white). The more the point’s relative luminance will be close to 0, the darker the color will be and conversely.
