Color tools
Contrast Checker (WCAG AA/AAA)
Quickly test readability between a text color and a background color. Built to support our color games and practical design checks.
Preview
The quick brown fox jumps over the lazy dog. 0123456789
Smaller text is harder. Contrast helps readability.
Text color (HEX)
Example: #111827
Background color (HEX)
Example: #faf8f5
Contrast ratio
16.73
WCAG AA (normal text)PASS · 4.5+
WCAG AAA (normal text)PASS · 7.0+
WCAG AA (large text)PASS · 3.0+
WCAG AAA (large text)PASS · 4.5+
How it works
The contrast ratio is computed from each color’s relative luminance in sRGB. The ratio ranges from 1:1 (same color) up to 21:1 (black on white).
Use AA/AAA as guidance: normal body text typically needs more contrast than large headlines. If you’re not sure, aim for AA (4.5+) for normal text.
FAQ
- What is a contrast checker?
- A contrast checker measures the contrast ratio between text and background colors. Higher contrast generally improves readability and accessibility.
- What do AA and AAA mean?
- They’re WCAG contrast targets used as practical guidance. AA is a common baseline; AAA is a stricter target. Large text has lower ratio requirements than normal text.
- Is this a design approval tool?
- No. It’s a quick, browser-based helper. Real readability depends on font, size, weight, and your display conditions.