Adding enough color contrast
Updated: Sep 29, 2020
Providing enough contrast between text or graphics and their background helps users, specially people with moderately low vision (who do not use contrast-enhancing assistive technology), to read and see things effortlessly.
In the WCAG recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text or graphics and the background.
According to WCAG 2.0:
o level AA:
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
o level AAA:
WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text and graphics.
Check Color Contrast with Adee for free!
Adee helps you design and test color contrast of your font and graphics easily through your design process (before coding!) and share with your team!
… And it’s free!