Published: April 2026 • 9 min read • Accessibility Tools
Color contrast is one of the most critical aspects of web accessibility. If your text doesn't have enough contrast against its background, millions of people with visual impairments — including color blindness, low vision, and age-related vision decline — won't be able to read your content. Our free WCAG contrast checker helps you verify that your color combinations meet the Web Content Accessibility Guidelines (WCAG) 2.1 standards, ensuring your designs are inclusive and legally compliant.
This guide explains what contrast ratios are, how WCAG scoring works, and how to use our tool to build accessible color palettes from the ground up.
Test foreground/background color pairs against WCAG 2.1 AA and AAA standards.
WCAG stands for Web Content Accessibility Guidelines — a set of internationally recognized standards published by the World Wide Web Consortium (W3C). These guidelines ensure that digital content is perceivable, operable, understandable, and robust for people with disabilities.
WCAG 2.1 is organized into three levels of conformance:
For color contrast, WCAG defines specific ratio thresholds at each level. Meeting AA is considered the baseline for most websites and applications, and in many jurisdictions, it's a legal requirement under accessibility laws like the ADA (Americans with Disabilities Act), EAA (European Accessibility Act), and AODA (Accessibility for Ontarians with Disabilities Act).
A contrast ratio is a numerical value that represents the difference in luminance (perceived brightness) between two colors — typically text and its background. The ratio ranges from 1:1 (identical colors, no contrast) to 21:1 (white on black, maximum contrast).
The formula considers the relative luminance of each color, which is calculated from the sRGB values of the red, green, and blue channels. Our contrast checker handles this calculation automatically — you just need to provide the two colors.
Key points to remember:
Input the foreground (text) color and background color using HEX codes, RGB values, or the built-in color picker. You can also use our HEX to RGB converter if you need to switch formats first.
The tool instantly calculates the contrast ratio and displays pass/fail results for AA and AAA compliance for both normal and large text. A live preview shows how the text looks against the background, so you can verify readability visually.
If your combination doesn't pass, use the color pickers to adjust the foreground or background color. The results update in real time, so you can quickly find an accessible alternative. Our tool also suggests lighter or darker variants that would meet the requirements.
Let's verify if light gray text on a dark background is accessible:
Foreground: #e2e8f0 (light gray) Background: #0f0f1a (near black) Contrast Ratio: 13.5:1 ✅ AA Normal Text: PASS ✅ AAA Normal Text: PASS ✅ AA Large Text: PASS ✅ AAA Large Text: PASS
This combination passes all WCAG levels, making it an excellent choice for dark-mode interfaces.
Foreground: #a1a1aa (medium gray) Background: #1e1e2e (dark gray) Contrast Ratio: 5.4:1 ✅ AA Normal Text: PASS ❌ AAA Normal Text: FAIL (needs 7:1) ✅ AA Large Text: PASS ❌ AAA Large Text: FAIL (needs 4.5:1)
This combination meets AA but fails AAA. To achieve AAA compliance, you'd need to lighten the text or darken the background.
Gradients pose a special challenge because the contrast ratio changes across the gradient. Our contrast checker includes a gradient mode that tests contrast at multiple points along the gradient, ensuring your text remains readable everywhere.
Text: #ffffff Gradient: linear-gradient(135deg, #6366f1, #ec4899) Point 1 (0%): #6366f1 → 4.6:1 ✅ AA PASS Point 2 (50%): #9333ea → 3.2:1 ❌ AA FAIL Point 3 (100%): #ec4899 → 3.0:1 ❌ AA FAIL ⚠️ This gradient needs adjustment. Darken the colors or add an overlay.
When creating a design system or component library, run every text/background combination through a contrast checker during the token definition phase. This prevents accessibility issues from propagating to every page that uses the system.
Dark mode is popular, but it's easy to accidentally create low-contrast combinations. Light gray text on dark backgrounds can fail WCAG if the gray isn't light enough. Always verify your dark mode palette with a contrast checker.
Many countries require digital accessibility by law. Running a contrast check on your e-commerce site's product descriptions, pricing, and checkout flows can help you avoid legal issues and serve a broader customer base.
Accessibility isn't limited to websites. If you design PDF documents, email templates, or presentation slides, contrast checking is equally important. Our tool works with any color combination, regardless of where it will be used.
For normal-sized body text (typically 14–16px), WCAG AA requires a minimum contrast ratio of 4.5:1 against its background. For AAA compliance, you need 7:1. We recommend targeting AAA for body text whenever possible, as it improves readability for everyone — not just users with visual impairments.
WCAG is web-focused, but the principles apply to native mobile apps as well. Apple's Human Interface Guidelines and Google's Material Design both recommend following WCAG contrast ratios. Many accessibility laws (like the European Accessibility Act) cover mobile apps alongside websites.
Don't panic. You don't need to change your brand colors. Instead, use them as accents (buttons, borders, decorative elements) and choose accessible alternatives for text. For example, if your brand blue is too dark for text on a white background, use a darker or lighter variant of the same hue for text while keeping the brand color for non-text elements.
The formula converts each color's RGB values to relative luminance (a measure of perceived brightness), then divides the brighter luminance by the darker luminance, with a small adjustment factor (0.05) added to both values. The result is a ratio like 4.5:1 or 7:1. Our tool performs this calculation automatically.
In many jurisdictions, yes. The Americans with Disabilities Act (ADA) in the US, the European Accessibility Act (EAA) in the EU, and similar laws in Canada, Australia, and the UK all impose accessibility requirements on digital content. While specific standards vary, WCAG 2.1 AA is widely referenced as the benchmark. Non-compliance can result in lawsuits, fines, and reputational damage.
Convert colors before contrast checking
Create accessible gradient backgrounds
Placeholder text for accessibility testing
Color contrast isn't just a nice-to-have — it's a fundamental requirement for inclusive, accessible design. Our WCAG contrast checker makes it easy to verify your color combinations against the latest standards, with real-time feedback and helpful suggestions. Build with accessibility in mind from the start, and you'll create experiences that work for everyone.