Color Contrast Checker
Check WCAG AA and AAA contrast ratios for accessibility compliance.
Common Pairs
Contrast Ratio
17.40
17.40:1
5 / 5 criteria pass
Live Preview
The quick brown fox jumps over the lazy dog.
Large Text Sample
Small caption text example — 12px
WCAG Results
WCAG AA
Normal Text
Required: 4.5:1Pass
WCAG AA
Large Text
Required: 3:1Pass
WCAG AA
UI Components
Required: 3:1Pass
WCAG AAA
Normal Text
Required: 7:1Pass
WCAG AAA
Large Text
Required: 4.5:1Pass
What counts as large text?
18pt (24px) or larger, or 14pt (~18.67px) bold or larger per WCAG 2.1.
UI components
Non-text UI components (icons, borders, form controls) require 3:1 under WCAG AA.
Frequently Asked Questions
- What is WCAG color contrast?
- WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background to ensure readability for people with visual impairments.
- What is the WCAG AA standard?
- WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ or 14px+ bold). This is the legal minimum for most jurisdictions.
- What is WCAG AAA?
- AAA is the highest level: 7:1 for normal text, 4.5:1 for large text. Recommended for maximum accessibility.
- What counts as large text?
- Text that is 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger counts as large text under WCAG.
- Does this work for UI components?
- Yes. Non-text UI components and graphical objects require a 3:1 contrast ratio against adjacent colors under WCAG AA.