Color Contrast Checker
🎨 Choose Colors
WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with moderately low vision.
| Level | Text Size | Min Ratio | Use Case |
|---|---|---|---|
| AA | Normal (<18pt / <14pt bold) | 4.5:1 |
Standard requirement for most text |
| AA | Large (≥18pt / ≥14pt bold) | 3:1 |
Headings and larger UI elements |
| AAA | Normal | 7:1 |
Enhanced accessibility (recommended) |
| AAA | Large | 4.5:1 |
Enhanced accessibility for large text |
📐 What is Large Text?
Large text is defined as:
- 18pt (24px) or larger for regular weight
- 14pt (18.5px) or larger for bold weight
Large text can have lower contrast because its size makes it inherently more readable.
🎯 Which Level to Target?
AA is the standard requirement for most websites and apps. It's required by many legal accessibility standards.
AAA provides enhanced readability and is recommended for body text, especially on content-heavy sites.
🧮 How It's Calculated
Contrast ratio uses relative luminance of colors:
(L1 + 0.05) / (L2 + 0.05)
Where L1 is lighter color luminance and L2 is darker. Range is 1:1 (same color) to 21:1 (black/white).
⚖️ Legal Requirements
- ADA (US) - Courts reference WCAG 2.0 AA
- Section 508 - WCAG 2.0 AA required
- EN 301 549 (EU) - WCAG 2.1 AA required
- AODA (Canada) - WCAG 2.0 AA required
Frequently Asked Questions
What is a color contrast ratio?
A color contrast ratio measures the difference in perceived brightness between two colors. It ranges from 1:1 (identical colors) to 21:1 (black on white). The ratio is calculated from the relative luminance of each color using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance.
What contrast ratio do I need for WCAG AA?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or under 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). These are the most commonly required levels for legal compliance under the ADA, Section 508, and EN 301 549.
What is the difference between WCAG AA and AAA?
WCAG AA is the standard compliance level, requiring 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. Most legal frameworks reference AA as the minimum. AAA is recommended for content-heavy sites where extended reading is expected.
Does color contrast affect SEO?
Indirectly, yes. Google uses page experience signals including Core Web Vitals. Sites with poor accessibility tend to have higher bounce rates and lower engagement metrics, which can influence rankings. Google Lighthouse also flags contrast failures as accessibility issues, and accessibility is part of the broader page experience evaluation.
How do I fix a failing contrast ratio?
To fix a failing contrast ratio, darken the text color, lighten the background, or both. The goal is to increase the luminance difference between the two colors. Common pitfalls include light gray text on white backgrounds or colored text on similarly saturated backgrounds. This tool automatically suggests compliant color alternatives when your combination fails AA.
What counts as large text in WCAG?
Large text is defined as 18pt (24px) or larger at regular weight, or 14pt (approximately 18.5px) or larger at bold weight. Large text has a lower minimum contrast requirement because its size makes it inherently more readable. This applies to headings, hero text, and large UI labels.
Do icons and UI components need to meet contrast requirements?
Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a minimum 3:1 contrast ratio for user interface components—buttons, form field borders, focus indicators—and meaningful graphical objects like icons. This applies to the visual boundary or state indicator, not necessarily every decorative pixel.
Is this contrast checker accurate?
Yes. This tool calculates contrast ratios using the exact WCAG 2.x algorithm: it converts sRGB hex values to linear RGB, computes relative luminance for each color, and derives the ratio. All computation runs locally in your browser using JavaScript. No color data is sent to any server.
Privacy & Limitations
- All calculations run entirely in your browser -- nothing is sent to any server.
- Results are estimates and may vary based on actual conditions.
Related Tools
- Color Blindness Simulator -- Simulate how images appear to people with color vision deficiency
- Spacing System Calculator -- Generate design system spacing scales with visual preview and export options
- UTM Link Builder -- Build URLs with UTM tracking parameters
- Robots.txt Generator -- Generate a robots.txt file with common rules
Related Tools
View all toolsUTM Link Builder
Build URLs with UTM tracking parameters
User-Agent Parser
Parse a user-agent string for quick details
URL Parser
Parse a URL into protocol, host, path, and query
Sitemap XML Generator
Generate a simple sitemap.xml from a list of URLs
Robots.txt Generator
Generate a robots.txt file with common rules
Meta Tag Generator
Generate common SEO meta tags for a page
Color Contrast Checker FAQ
What is a color contrast ratio?
A color contrast ratio measures the difference in perceived brightness between two colors. It ranges from 1:1 (identical colors) to 21:1 (black on white). The ratio is calculated from the relative luminance of each color using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
What contrast ratio do I need for WCAG AA?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or under 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). These are the most commonly required levels for legal compliance.
What is the difference between WCAG AA and AAA?
WCAG AA is the standard compliance level, requiring 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. Most legal frameworks reference AA. AAA is recommended for body-heavy content sites.
Does color contrast affect SEO?
Indirectly, yes. Google uses Core Web Vitals and page experience signals. Sites with poor accessibility may have higher bounce rates and lower engagement, which can affect rankings. Google Lighthouse also flags contrast failures, and accessibility is part of the broader page experience evaluation.
How do I fix a failing contrast ratio?
To fix a failing contrast ratio, darken the text color, lighten the background color, or both. Increase the lightness difference between the two colors. Avoid light gray text on white backgrounds or dark text on dark backgrounds. This tool suggests compliant alternatives automatically when your colors fail.
What counts as large text in WCAG?
Large text in WCAG is defined as 18pt (24px) or larger at regular weight, or 14pt (approximately 18.5px) or larger at bold weight. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because its size makes it inherently more readable.
Do icons and UI components need contrast requirements?
Yes. WCAG 2.1 Success Criterion 1.4.11 requires a minimum 3:1 contrast ratio for user interface components (buttons, form fields, focus indicators) and meaningful graphical objects. This applies to the visual boundary or state indicator, not necessarily every pixel.
Is this contrast checker accurate?
Yes. This tool calculates contrast ratios using the exact WCAG 2.x algorithm: it converts sRGB hex values to linear RGB, computes relative luminance for each color, and derives the ratio. The calculation runs entirely in your browser. No data is sent to any server.