Skip to main content

color-contrast

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

Severity: Serious

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy