Color contrast checker.
Pick a text color and a background, see the exact contrast ratio, and check it against WCAG AA and AAA for normal and large text. Runs in your browser, nothing is uploaded.
Normal text, 16px. The quick brown fox jumps over the lazy dog while the team ships the work.
Large text, 24px bold
Button labelDesign that goes past the checklist.
Moonb is a creative team for brand, design and motion. Book a call and tell us what you're building.
See how it worksAbout this tool
Check whether two colors pass WCAG accessibility standards. Enter foreground and background colors and get the contrast ratio with pass or fail results for AA and AAA at normal and large text sizes. Low-contrast text is unreadable for many people, and accessibility flags hurt audits.
How to use it
- Enter your text color and background color, hex codes or the pickers both work.
- Read the contrast ratio and the AA and AAA results.
- Adjust either color until the combination passes the level you need.
Frequently asked questions
AA requires 4.5 to 1 for normal text and 3 to 1 for large text. AAA is stricter at 7 to 1 and 4.5 to 1.
Roughly 24px and up for regular weight, or 18.5px and up for bold.
Contrast is an accessibility signal in Lighthouse audits, and readable pages keep visitors longer. It also simply serves more of your audience.