Color Contrast Checker

How to use it

1. Set a foreground color and a background color — HEX, rgb() or hsl() all work.
2. The contrast ratio appears instantly, followed by PASS/FAIL against WCAG 2.1 AA and AAA for both normal and large text.
3. The sample chip renders real text in your chosen pair so you can judge it by eye as well as by number.

Common use cases

• Accessibility audits — prove (or fix) that body text meets AA before a design handoff.
• Choosing grays — grey-on-grey is the most common contrast failure; the checker shows the exact ratio.
• Button and badge colors — verify that a white label on your brand color passes at small sizes.

FAQ

Q: What are the WCAG thresholds? A: Normal text needs 4.5:1 (AA) and 7:1 (AAA); large text (≥18px, or ≥14px bold) needs 3:1 and 4.5:1.

Q: Does it handle alpha transparency? A: The checker parses solid rgb()/hsl() colors. For translucent overlays, compute the blended result first, then check the pair.

Q: Can I rely on 4.5:1 for everything? A: WCAG AA at 4.5:1 is the baseline most products target. AAA is stricter and usually applied to long body text, not decorative UI.