WCAG Color Contrast Checker: Test AA & AAA Ratio (2027)
Test web color contrast ratios instantly against WCAG 2.2 AA & AAA standards. Free online color contrast checker for web designers and developers.
Color choice is one of the first things people notice on a website. However, low-contrast text—such as light gray text on a white background or dark blue text on a black container—makes content unreadable for millions of users worldwide.
According to the World Health Organization (WHO), over 2.2 billion people live with vision impairment. In addition, millions experience temporary visual limitations, such as viewing a mobile screen under direct sunlight. Web accessibility is no longer just a 'nice-to-have' feature; it is a global legal standard under the U.S. Americans with Disabilities Act (ADA), the European Accessibility Act (EAA), and Section 508.
Featured Snippet: A color contrast checker is an accessibility testing tool that calculates the relative luminance ratio between text (foreground) and its background color. It outputs a numerical contrast ratio (ranging from 1:1 to 21:1) and indicates whether the combination passes Web Content Accessibility Guidelines (WCAG 2.2) at Level AA or Level AAA.
Understanding WCAG 2.2 Standards & Contrast Ratios
The Web Accessibility Initiative (WAI) publishes the Web Content Accessibility Guidelines (WCAG). The latest version, WCAG 2.2, defines three levels of conformance: Level A (minimum), Level AA (standard target), and Level AAA (enhanced).
| Text Type | Level AA Requirement | Level AAA Requirement | Notes |
|---|---|---|---|
| Normal Text (< 18pt / < 24px) | 4.5:1 minimum | 7.0:1 minimum | Body copy, paragraph text, form inputs, button labels |
| Large Text (≥ 18pt / ≥ 24px or ≥ 14pt bold) | 3.0:1 minimum | 4.5:1 minimum | Main headings, large banners, bold callout texts |
| UI Components & Graphic Objects | 3.0:1 minimum | 3.0:1 minimum | Form borders, focus rings, icons, chart indicators |
| Incidental / Decorative Text | No requirement | No requirement | Inactive UI states, logos, pure background decoration |
Step-by-Step Guide: How to Check Color Contrast Ratio Online
- Open the Color Contrast Checker tool on QuizOxa Tools.
- Input Foreground (Text) Color: Enter your hex code (e.g., #0F172A), RGB value, or select a color using the visual color picker.
- Input Background Color: Enter your container or page background color (e.g., #FFFFFF).
- Read the Instant Ratio: The tool calculates the precise contrast ratio automatically (e.g., 15.8:1).
- Check Conformance Badges: View real-time pass/fail badges for WCAG AA Normal Text (4.5:1), WCAG AA Large Text (3.0:1), WCAG AAA Normal Text (7.0:1), and UI Components (3.0:1).
- Adjust Colors in Real Time: If your color fails, move the built-in lightness slider until the badge turns green.
Key Features & Developer Benefits
- 100% Client-Side Privacy: All color math runs inside your browser using JavaScript. Zero server uploads.
- Bi-Directional Format Support: Works seamlessly with HEX, RGB, HSL, and Tailwind CSS palette tokens.
- Interactive Lightness Tweaker: Suggests darker or lighter color variations automatically when a ratio fails.
- Live Text Preview: Displays a live preview rendered in real body text, bold headings, and interactive buttons.
Real-World Code Examples & Design Implementations
/* ❌ FAIL: Low Contrast Button (2.1:1 ratio) */
.btn-danger-bad {
background-color: #f87171;
color: #ffffff;
}
/* ✅ PASS: Accessible Button (4.8:1 ratio - WCAG AA) */
.btn-danger-good {
background-color: #dc2626;
color: #ffffff;
}
/* ✅ PASS: Accessible Card Container (12.4:1 ratio - WCAG AAA) */
:root {
--bg-surface: #0f172a;
--text-primary: #f8fafc;
--accent-focus: #38bdf8;
}
.card {
background-color: var(--bg-surface);
color: var(--text-primary);
}Tips & Best Practices for Accessible UI Design
- Never rely on color alone: Combine color cues with icons, underline links, or bold text labels to support colorblind users.
- Test focus states & borders: Ensure input fields have a minimum 3.0:1 contrast ratio against surrounding card containers when focused.
- Audit dark mode schemes: Dark backgrounds require lighter text weights to maintain readability without blooming effects on OLED screens.
- Check text over background images: Always place a semi-transparent dark overlay (rgba(0,0,0,0.6)) behind text layered over photos.
Common Web Contrast Mistakes to Avoid
- Light Gray Body Text: Using #94A3B8 or #A1A1AA on white backgrounds for a 'minimalist' look that fails accessibility checks.
- Orange & Yellow CTA Buttons with White Text: White text on yellow (#EAB308) yields a failing ratio of ~1.6:1. Use dark text (#0F172A) instead.
- Ignoring Placeholder Text: Failing to optimize form input placeholders (::placeholder), leaving them unreadable for low-vision users.
- Relying on Browser Defaults: Assuming standard user agent styles pass modern accessibility audits.
Frequently Asked Questions
What is the minimum color contrast ratio for normal text under WCAG 2.2 AA?
The minimum contrast ratio for normal text (under 18pt or 24px) is 4.5:1 under WCAG 2.2 Level AA.
What contrast ratio is required for large text?
Large text (18pt/24px or larger, or 14pt bold) requires a minimum ratio of 3.0:1 for Level AA compliance.
Does WCAG color contrast apply to placeholder text in form inputs?
Yes. Under WCAG 2.2, placeholder text must meet the minimum 4.5:1 ratio if it conveys essential instructions.
What is the difference between WCAG 2.1 and WCAG 2.2 color contrast rules?
WCAG 2.2 maintains the core 4.5:1 and 3.0:1 contrast requirements of WCAG 2.1, but adds stricter focus appearance guidelines (Success Criterion 2.4.13) requiring visible focus indicators with strong contrast.
Are logos and brand trademarks exempt from contrast rules?
Yes. Text or images of text that are part of an active logo or brand name are exempt from WCAG contrast requirements.
Does color contrast matter for dark mode designs?
Yes. Dark mode requires high contrast between light text and dark surfaces (e.g., #F8FAFC on #0F172A delivers a 15.8:1 ratio).
How is the relative luminance formula calculated?
Relative luminance (L) is calculated as L = 0.2126 * R + 0.7152 * G + 0.0722 * B, where RGB values are linearized across the sRGB color space.
Can disabled button states fail WCAG compliance checks?
Inactive or disabled user interface elements are explicitly exempt from WCAG 2.2 contrast rules.
Key Takeaways
- 4.5:1 is the magic contrast ratio for normal body text under WCAG 2.2 AA standards.
- 3.0:1 is required for large text (≥ 24px or ≥ 18.5px bold) and graphical UI components.
- Accessibility boosts search engine rankings, mobile performance, and legal ADA compliance.
- Testing contrast early in design prevents expensive developer rewrites.
Stop guessing whether your design colors are accessible! Test your text and background color combinations instantly with QuizOxa Color Contrast Checker. No sign-up required.