WCAG Color Contrast Checker
WCAG Text and Background Contrast Requirements
1 Month Free with a yearly subscription!
Monthly
Yearly
| Element | Minimum Contrast Ratio | Requirement |
|---|---|---|
| Standard Text | 4.5:1 | Text smaller than 18 pt or 14 pt bold must have a contrast ratio of at least 4.5:1. |
| Large Text | 3:1 | Text that is 18 pt or larger or 14 pt bold, must have a contrast ratio of at least 3:1. |
| Non-text Elements | 3:1 | Icons, buttons, graphics and other UI elements must have a contrast ratio of at least 3:1 against the background. |
Bring accessibility into every design decision?
Frequently Asked Questions
-
WCAG requires a minimum contrast ratio of 4.5:1 for standard text and 3:1 for large text & non-text UI elements to ensure readability.
-
Adequate color contrast improves readability for people with low vision and helps meet WCAG accessibility requirements.
-
Yes.
- Open a webpage in your browser.
- Open Inspect (DevTools).
- In the Elements panel, select the A11yInspect tab.
- Click on "CSS Overview" to see the existing color palette used across your website.
-
A11yInspect is available on Google Chrome, Microsoft Edge, and Mozilla Firefox.
-
No. A11yInspect goes beyond color contrast, offering CSS Overview, bookmarklets, code level issue detection and audit reports to help developers and QA teams find and fix accessibility issues across websites and mobile applications.
-
Yes. Color Contrast Checker features are available in the Free version of A11yInspect.