Color Contrast Checker
Check whether a foreground and background color combination meets WCAG accessibility contrast standards.
About this color contrast checker
Low-contrast text is one of the most common web accessibility failures, hard to read for many users, and specifically flagged in accessibility audits. This tool checks your color pair against the official thresholds instantly.
How color contrast checker works
The relative luminance of each color is calculated per the WCAG formula, and the contrast ratio between them is compared against the AA and AAA pass thresholds for both normal and large text.
Common uses
- Checking text and background colors meet accessibility standards
- Auditing a design system's color pairs for compliance
- Fixing a low-contrast design flagged in an accessibility review
How to use this tool
- Pick your foreground (text) color.
- Pick your background color.
- See the contrast ratio and WCAG pass/fail results.
What to know before using it
Checks the mathematical contrast ratio per WCAG guidelines, a full accessibility audit covers additional factors beyond color contrast alone.
Privacy and browser-first processing
Checked entirely in your browser, nothing is logged.
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?
4.5:1 for normal text, or 3:1 for large text (18pt and above, or 14pt bold and above).
What is the difference between AA and AAA?
AAA is a stricter standard, requiring 7:1 for normal text, AA (4.5:1) is the more commonly required baseline for most compliance purposes.