Preview
The quick brown fox jumps over the lazy dog (24px Bold)
The quick brown fox jumps over the lazy dog (18px - Large Text)
The quick brown fox jumps over the lazy dog (16px - Normal Text)
The quick brown fox jumps over the lazy dog (12px - Small Text)
Contrast Ratio
14.68 : 1
WCAG Compliance
| Level | Large Text (18pt+) | Normal Text |
|---|---|---|
| AA | Pass ✓ | Pass ✓ |
| AAA | Pass ✓ | Pass ✓ |
Common Color Pairs
Frequently Asked Questions
What is WCAG contrast ratio?
The Web Content Accessibility Guidelines (WCAG) define contrast ratio as the relative luminance difference between foreground and background colors. A ratio of 4.5:1 is required for normal text at AA level, while 7:1 is needed for AAA. Large text (18pt or 14pt bold) has a lower threshold of 3:1 for AA.
What is the difference between AA and AAA compliance?
AA is the minimum level recommended for most web content and requires a contrast ratio of at least 4.5:1 for normal text. AAA is the highest level and requires 7:1, providing better readability for users with low vision. Most regulations reference AA as the standard to meet.
How do I fix a failing contrast ratio?
Increase the lightness difference between your text and background colors. You can darken the text, lighten the background, or both. This tool provides automatic suggestions that maintain your original hue while adjusting lightness to meet the target ratio.
Does this checker work for dark mode designs?
Yes. The contrast ratio formula is the same regardless of whether you are designing for light or dark mode. Simply enter your dark background as the background color and your light text as the foreground color. The WCAG requirements remain identical.
Are my color choices saved between sessions?
Yes. Your foreground and background color selections are automatically saved in your browser's local storage. When you return, the tool restores your last-used colors so you can pick up right where you left off. No account or sign-up is needed.