▩
No signupGradient Generator
Design and export CSS gradients visually.
Open toolA/B
Contrast Checker
Check WCAG color contrast ratios for accessibility.
contrast-checker.tool
Large text sample (24px+)
Normal text sample - the quick brown fox jumps over the lazy dog.
17.79:1
Contrast ratio
✓AA - Normal text (4.5:1)
✓AA - Large text (3:1)
✓AAA - Normal text (7:1)
✓AAA - Large text (4.5:1)
Uses the official WCAG 2.1 relative luminance formula - calculated locally in your browser.
What is a contrast checker?
This tool checks the contrast ratio between two colors using the official WCAG 2.1 relative luminance formula, and shows whether the combination passes AA and AAA accessibility standards for normal and large text.
How to use this tool
- 1Pick a text color and a background color.
- 2The contrast ratio and pass/fail badges update instantly.
- 3Use Swap to flip which color is foreground vs background.
Common use cases
Checking whether a design's text/background color combination meets accessibility standards
Choosing an accessible color palette before finalizing a design
Auditing an existing site's colors for WCAG compliance
Understanding how contrast requirements differ for large versus normal text
Good to know
Frequently asked questions
What do AA and AAA mean?
They're WCAG conformance levels - AA is the commonly required standard (4.5:1 for normal text, 3:1 for large text), while AAA is a stricter standard (7:1 and 4.5:1 respectively) used for higher-accessibility contexts.
What counts as 'large text' for these thresholds?
Generally 24px (18pt) or larger, or 19px (14pt) bold or larger, per the WCAG definition.
How was the contrast formula verified?
Against known reference values - black on white correctly produces the maximum possible ratio of 21:1, and the commonly cited AA boundary gray (#767676) on white correctly produces approximately 4.5:1.
Is my color data sent anywhere?
No - the calculation happens entirely in your browser.
quick_facts.json
{
"runs_in_browser": true,
"data_sent_to_server": false,
"signup_required": false,
"price": "free",
"category": "Color Tools"
}