Color Contrast Checker
AccessibilityCheck the contrast ratio between any two colors and verify WCAG 2.1 AA and AAA compliance. See live text previews at multiple sizes — all computed locally.
Click swatch or type HEX
Click swatch or type HEX
Excellent — passes all WCAG 2.1 levels.
Luminance
Foreground
0.0092
Background
1.0000
AA — Normal Text
< 18pt / 14pt bold
Pass
min 4.5:1
AA — Large Text
≥ 18pt / 14pt bold
Pass
min 3:1
AAA — Normal Text
Enhanced standard
Pass
min 7:1
AAA — Large Text
Enhanced large
Pass
min 4.5:1
UI Components
Graphics, borders
Pass
min 3:1
The quick brown fox jumps over the lazy dog. (Large — 28px Bold)
The quick brown fox jumps over the lazy dog. (Normal — 16px)
The quick brown fox jumps over the lazy dog. (Small — 12px)
Based on WCAG 2.1 — all calculations run locally in your browser · No data transmitted
Why Color Contrast Matters
Approximately 300 million people have some form of color blindness, and over 2.2 billion people globally have a vision impairment. Poor color contrast is one of the most common accessibility failures on the web. WCAG 2.1 guidelines, published by the W3C, define the minimum contrast ratios needed for content to be perceivable by users with low vision or color blindness.
WCAG 2.1 Contrast Thresholds
- AA Normal Text: 4.5:1 minimum — required for body text under 18pt
- AA Large Text: 3:1 minimum — applies to text 18pt or larger (14pt bold)
- AAA Normal Text: 7:1 minimum — enhanced accessibility for critical content
- AAA Large Text: 4.5:1 minimum — enhanced for large display text
- UI Components: 3:1 minimum — applies to icons, borders, and interactive elements
Color Contrast FAQs
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for users with visual impairments, including color blindness.
WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). UI components like buttons and form inputs also require 3:1.
AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. It is recommended for text that is critical to understand, such as legal text or medical instructions.
The contrast ratio is calculated using relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one. Luminance is computed from linearized RGB values.
Yes. All contrast calculations happen entirely in your browser using JavaScript. No color data is ever sent to a server.
AI chatbots estimate or hallucinate contrast ratios because they perform approximate math. This tool implements the exact WCAG 2.1 algorithm and gives precise, specification-conformant results every time.