Frontend Engineering Tools
Accessibility Color Contrast Checker
Enter foreground and background hex colors and font size to compute contrast ratio and check WCAG 2.1 AA and AAA compliance.
No data is transmitted — everything runs locallyTool
Example — Dark slate text on a white background for a standard body-copy contrast check.
Contrast ratio
14.68:1
WCAG formula
WCAG AA
✓ Pass
normal text: 4.5:1 min
WCAG AAA
✓ Pass
7:1 min
Text type
Normal text
16pt
About this tool
Accessibility Color Contrast Checker
The Accessibility Color Contrast Checker computes WCAG 2.1 relative luminance contrast ratio and checks AA (4.5:1) and AAA (7:1) compliance for text and UI components.
• Check color contrast before submitting a design to development
• Verify a color pair meets WCAG 2.1 AA requirements for a compliance audit
• Find the minimum font size at which a color pair meets contrast requirements
• Check dark mode color pair contrast separately from light mode
Affiliate disclosure
Developer-friendly cloud infrastructure. DigitalOcean provides cloud compute, networking, and managed databases with predictable pricing.
View DigitalOcean options
External site · Independent provider · We may receive a commission · Not a recommendation
FAQ
What does this tool tell you?
The Accessibility Color Contrast Checker computes WCAG 2.1 relative luminance contrast ratio and checks AA (4.5:1) and AAA (7:1) compliance for text and UI components.
What affects the result most?
WCAG 2.1 AA: 4.5:1 for normal text (<18pt), 3:1 for large text (≥18pt or ≥14pt bold). WCAG 2.1 AAA: 7:1 for normal text, 4.5:1 for large text — required for some accessibility standards. Relative luminance: L = 0.2126R + 0.7152G + 0.0722B (linearized) — mathematically defined.
How should I use the result?
The calculation is deterministic — the same inputs always produce the same output — so the most useful workflow is to vary one input at a time and see which factor moves the result most. That tells you where to focus your attention before committing to a decision.