People who are color blind, vision impaired or who have an age-related impairment often struggle to read text when there isn’t enough contrast between the color of the text and its background. There are two levels of requirements for color contrast, depending on the level of conformance your website is aiming to achieve.
- Ensure that information conveyed by color differences is also communicated in text or via other visual cues.
- Check that the contrast between text (or images of text) and background color meets the color contrast requirements that are applicable to your website’s level of conformance (WCAG 2.0 Level AA or Level AAA). Logos, decorative text and incidental text are exempt.
- Use a larger font size or higher contrast ratio for lightweight fonts or fancy fonts.
Minimum contrast requirements (Level AA):
- For text (and images of text) that is less than 18 points or less than 14pt bold, check that the contrast ratio between text and its background is at least 4.5:1.
- For text (and images of text) that is 18 points or 14pt bold or larger, check that the contrast ratio between text and its background is at least 3:1.
Enhanced contrast requirements (Level AAA):
- For text (and images of text) that is less than 18 points or less than 14pt bold, check that the contrast ratio between text and its background is at least 7:1.
- For text (and images of text) that is 18 points or 14pt bold or larger, check that the contrast ratio between text and its background is at least 4.5:1.
Check your color/contract here: Clemson’s Palette
Check your color/contrast here: Color Contrast Checker
For more information, see 272: Color Accessibility with Geri Coady
