Color Contrast Checker
Pick a text color and background color. The tool calculates the contrast ratio and shows whether it meets WCAG accessibility standards.
Large Text (24px+)
Normal text (16px). The quick brown fox jumps over the lazy dog.
Small text (14px) for fine print and captions.
Color Contrast Checker – WCAG 2.1 Accessibility Tool
Good color contrast ensures that text is readable for everyone, including people with visual impairments. This color contrast checker calculates the contrast ratio between text and background colors and tests compliance with WCAG 2.1 (Web Content Accessibility Guidelines) at both AA and AAA levels. It's essential for web designers, developers, and anyone building accessible interfaces.
What Is Color Contrast Ratio?
The contrast ratio is a numeric value that measures the difference in perceived brightness between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white).
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.
Relative luminance accounts for how the human eye perceives brightness differently across the color spectrum — green appears brighter than blue of the same intensity, for example.
WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios at two levels:
| Level | Normal Text | Large Text | Purpose |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | Standard accessibility requirement |
| AAA (enhanced) | 7:1 | 4.5:1 | Best practice for optimal readability |
Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold. Everything smaller is considered normal text.
Why Contrast Matters
- Legal compliance: Many countries require WCAG AA conformance for public websites. In the US, the ADA and Section 508 reference WCAG standards. The EU's European Accessibility Act also mandates compliance.
- Usability: Low-contrast text is hard to read in sunlight, on mobile screens, or for users over 40 whose contrast sensitivity naturally decreases.
- Visual impairments: About 1 in 12 men and 1 in 200 women have color vision deficiency. Adequate contrast helps all users, regardless of color perception.
- SEO impact: Google considers page experience factors, and accessibility is part of a good user experience.
Common Contrast Ratios
| Combination | Ratio | AA Normal | AAA Normal |
|---|---|---|---|
| Black (#000) on White (#FFF) | 21:1 | Pass | Pass |
| Dark Gray (#333) on White (#FFF) | 12.63:1 | Pass | Pass |
| Gray (#767676) on White (#FFF) | 4.54:1 | Pass | Fail |
| Light Gray (#999) on White (#FFF) | 2.85:1 | Fail | Fail |
| Red (#FF0000) on White (#FFF) | 4.0:1 | Fail | Fail |
| Blue (#0000FF) on White (#FFF) | 8.59:1 | Pass | Pass |
Tips for Better Contrast
- Avoid pure light gray text on white backgrounds — this is the most common accessibility failure on the web
- Test both light and dark modes — a color pair that works in light mode may fail in dark mode
- Don't rely on color alone — use icons, underlines, or labels in addition to color to convey information
- Check your entire design — buttons, links, placeholder text, and disabled states all need adequate contrast
- Use this tool during design — catching contrast issues early saves expensive redesign later
Frequently Asked Questions
What contrast ratio is needed for WCAG AA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold and above).
What is the difference between WCAG AA and AAA?
AA is the minimum standard that most organizations aim for. AAA is the enhanced standard with stricter requirements (7:1 for normal text, 4.5:1 for large text). AAA is recommended for optimal accessibility but not always required.
How is relative luminance calculated?
Relative luminance uses the sRGB color values, linearizes them (removes gamma correction), then weights them: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. This reflects how the human eye perceives brightness.
Is color contrast required by law?
Yes, in many jurisdictions. The Americans with Disabilities Act (ADA), Section 508, and the EU European Accessibility Act all reference or incorporate WCAG guidelines. Non-compliance can lead to lawsuits.
What is the minimum contrast for links and buttons?
Interactive elements like links and buttons should meet the same WCAG AA standards: 4.5:1 for normal-sized text, 3:1 for large text. Non-text elements like icons and UI controls also require 3:1 contrast against adjacent colors.
Related Tools
- Hex Color Picker — Pick and convert HEX, RGB, and HSL colors
- Pixel to REM Converter — Convert CSS units
- Readability Score Calculator — Analyze text readability
- Regex Tester — Test regular expressions
- Character Counter — Count characters and words