Contrast Checker
Choose foreground and background colors to verify accessibility against WCAG thresholds. Adjust font size and weight to see whether a design passes AA or AAA for normal or large text.
Check WCAG contrast ratio for text over a background. See AA/AAA pass/fail for normal and large text.
Foreground
Background
Size
px
Ratio: —
AA (normal): —
AAA (normal): —
AA (large): —
AAA (large): —
Sample
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec sollicitudin molestie malesuada.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- AA (normal text): ≥ 4.5:1; AAA (normal text): ≥ 7:1
- Large text (≥ 24px regular or ≥ 18.66px bold): AA ≥ 3:1, AAA ≥ 4.5:1
Frequently Asked Questions
- How do I check large text?
- Set the size to 24px+ (or 18.66px+ if bold). The large‑text thresholds are shown below the ratio.
- Does the tool support semi‑transparent colors?
- It expects hex color values. For alpha‑blended text, compute final colors against the background first.
- Is anything uploaded?
- No. All calculations happen in your browser.