WCAG Contrast Checker
Foreground + background colors → contrast ratio + WCAG AA/AAA pass/fail.
14.63:1contrast ratio
✓AA Normal (≥4.5)
✓AA Large (≥3)
✓AAA Normal (≥7)
✓AAA Large (≥4.5)
Normal text sample
The quick brown fox jumps over the lazy dog.
Large text sample (18pt bold)
The quick brown fox jumps over the lazy dog.
About WCAG Contrast Checker
Enter a foreground color and a background color, and the checker calculates the contrast ratio between them. It then reports whether the pair passes WCAG AA and AAA thresholds for both normal and large text, with a sample line shown in those colors.
All calculations happen in your browser using the standard relative luminance formula, so no colors are sent to a server. Use it to confirm that body text, link states, and button labels remain readable for people with low vision before shipping a design.
Frequently asked questions
- What contrast ratio passes WCAG AA?
- Normal text needs a ratio of at least 4.5 to 1, and large text needs at least 3 to 1.
- What counts as large text?
- Text is large if it is at least 24px, or 18.66px when bold, which lowers the required contrast ratio.
- Does contrast apply to icons and graphics?
- Yes. Meaningful non-text elements should meet a 3 to 1 ratio against adjacent colors under WCAG guidelines.