Question 167 - Certified User Experience Designer discussion

According to the Web Content Accessibility Guidelines (WCAG) 2.1, the minimum color contrast ratio for normal text is 4.5:11. This means that the difference in brightness (luminance) between the text color and the background color should be at least 4.5 times. This ensures that the text is readable by people with moderately low vision, color deficiencies, or contrast sensitivity1. The contrast ratio can be calculated using the formula:

L2+0.05L1+0.05

where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color2. The relative luminance is a value between 0 and 1, where 0 is black and 1 is white2. The contrast ratio can range from 1:1 (white on white) to 21:1 (black on white)2.

The contrast ratio requirement for normal text is lower for larger text or bold text, as they are easier to read at lower contrast. For large text (18 point or 14 point bold), the minimum contrast ratio is 3:11. For graphics and user interface components, such as form input borders, the minimum contrast ratio is also 3:13. For level AAA conformance, the minimum contrast ratio for normal text is 7:1 and for large text is 4.5:11.

To evaluate the color contrast ratio of a site, there are various tools available, such as the Contrast Checker or the Contrast Ratio tool. These tools allow users to enter the text color and the background color and see the contrast ratio and whether it meets the WCAG guidelines. They also provide suggestions for improving the contrast ratio if needed.

Understanding Success Criterion 1.4.3: Contrast (Minimum)

Contrast Ratio - WCAG Color Contrast Checker

WebAIM: Contrast Checker

WCAG: Accessible colour and contrast ratios

Contrast ratio - WCAG WG