color-contrast

Ensure that text elements have an adequate color contrast with the background as defined by WCAG 2 AA standards.

Description

Verify that text elements adhere to the contrast ratio standards as defined by WCAG 2 AA standards, ensuring ample contrast between text and background colors.

Why is it important?

Low contrast challenges those with limited vision, hindering distinction in outlines and details. Inadequate text-background contrast impacts readability. Notably, low vision cases outnumber total blindness. Distinguishing text for those with low vision or color blindness is challenging without sufficient contrast. Considering color transparency in the background is crucial, though foreground detection poses challenges due to diverse CSS properties. Overall, high text-background contrast enhances readability for most readers.

How to fix?

For small text, a minimum color contrast ratio of 4.5:1, and for large text (specified as 18pt, i.e., 24 CSS pixels or 14pt bold, i.e., 19 CSS pixels), a minimum color contrast ratio of 3:1 should be maintained. This is also applicable to text within images.

References

• WCAG 1.4.3: Contrast (Minimum)
• Accessibility Insights: color-contrast