Contrast Checker — Free WCAG Accessibility Contrast Ratio Tool

Color is one of the most powerful tools in design, but it can also be one of the most exclusionary. A beautiful color palette means nothing if your users cannot read the text. Poor contrast is the most common accessibility failure on the web, affecting over 300 million people with color vision deficiency and countless others using mobile devices in bright sunlight or aging screens with faded brightness. Our free Contrast Checker instantly calculates the contrast ratio between any two colors and tells you exactly where they stand against WCAG AA and AAA standards — so you can design inclusively without guessing.

What Is Color Contrast and Why Does It Matter?

Color contrast is the difference in perceived brightness between two colors. When text sits on a background, the contrast between them determines whether the text is readable. If the colors are too similar in brightness, they blend together and become invisible to people with low vision, color blindness, or even users squinting at a screen in direct sunlight.

The Web Content Accessibility Guidelines (WCAG) define contrast mathematically using relative luminance — a measure of how bright a color appears to the human eye. The formula accounts for the fact that our eyes are more sensitive to green light than red or blue. A bright green might look lighter than a bright red even if they have the same numerical brightness in RGB. The WCAG formula corrects for this, producing a contrast ratio that accurately reflects human perception.

The ratio ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast). Most accessible designs fall somewhere in the middle. A ratio of 4.5:1 is the minimum for normal text under WCAG AA. 7:1 is the stricter AAA standard. These are not arbitrary numbers — they are based on extensive research into what people with various visual impairments can actually distinguish.

Beyond accessibility, contrast affects everyone. High-contrast designs are easier to read on small screens, in bright environments, and for users over 40 whose eyes naturally lose contrast sensitivity. Low-contrast text might look elegant on a designer's calibrated monitor, but it becomes unreadable on a budget laptop, a cracked phone screen, or a projector in a lit room.

How to Use the Contrast Checker

Testing a color combination takes seconds. Pick two colors and get an instant verdict.

1. Choose your foreground color. This is typically your text color. Click the color swatch to open the native picker, or type a HEX code directly into the input field.
2. Choose your background color. This is the surface behind your text. Use the same picker or enter a HEX code manually.
3. Read the contrast ratio. The tool displays the exact ratio prominently — for example, 7.23:1 — so you know precisely where you stand.
4. Check WCAG compliance. The results table shows pass or fail status for:
   • Normal text at WCAG AA (4.5:1) and AAA (7:1)
   • Large text at WCAG AA (3:1) and AAA (4.5:1)
   • UI components at WCAG AA (3:1)
5. Preview the colors in context. The tool shows sample normal text and large heading text rendered with your chosen combination, so you can judge real-world readability visually.
6. Swap colors with the flip button to test the reverse combination — light text on a dark background instead of dark text on light.
7. Copy the ratio to your clipboard with one click for documentation or design system notes.

The entire process is instant. Adjust either color and watch the ratio, compliance table, and preview update in real time.

Understanding Contrast Ratios

Ratio Range	Accessibility Level	What It Means
1:1 to 2.99:1	Fails all standards	Text is barely distinguishable from background; unusable for any readable content
3:1 to 4.49:1	Passes AA for large text and UI only	Suitable for big headlines (18pt+), buttons, icons, and borders; fails for body text
4.5:1 to 6.99:1	Passes AA for all text	Meets the minimum standard for normal body text; readable for most users
7:1 to 21:1	Passes AAA for normal text	Enhanced accessibility; readable for users with significant vision loss; ideal for long-form content

What Counts as "Large Text"?

WCAG defines large text as 18 point (24 pixels) or larger, or 14 point bold (approximately 18.67 pixels bold) or larger. Headlines, call-to-action buttons, and hero text often qualify as large text, which means they can pass with a lower contrast ratio than body copy. However, aiming for at least 4.5:1 everywhere is still a best practice because it ensures consistency and future-proofs your design against resizing and zooming.

Why the Formula Uses Relative Luminance

The WCAG contrast formula is not a simple comparison of RGB values. It first converts each color into relative luminance — a measure of perceived brightness that weights green more heavily than red or blue because human eyes are most sensitive to green light. This is why two colors with identical brightness values in RGB can produce very different contrast ratios. A pure red (#FF0000) and a pure green (#00FF00) both have maximum intensity in one channel, but green appears much brighter to human eyes, so its relative luminance is higher.

Key Features

Feature	What It Does	Why It Matters
Real-Time Contrast Calculation	Computes the WCAG ratio instantly as you adjust colors	Iterate through palette options and see compliance update immediately
WCAG AA & AAA Testing	Shows pass/fail for normal text, large text, and UI components at both levels	Know exactly which standards you meet without memorizing thresholds
Live Text Preview	Renders sample body text and large headings with your colors	Judge readability visually, not just mathematically
Color Swap	Reverses foreground and background with one click	Test light-on-dark and dark-on-light variants instantly
HEX Input	Accepts direct HEX codes for precise color matching	Match exact brand colors from your design system
Copy Ratio	Copies the contrast ratio to clipboard	Document accessibility compliance in design specs and audits
Privacy-First	All calculations run in your browser	No design data is sent to any server

Unlike basic contrast tools that only show a number, this checker puts the ratio in context. You see not just that your combination scores 4.2:1, but that it fails AA for body text while passing for large text — actionable information that helps you decide whether to darken your text or increase your font size.

Real-World Use Cases

Web Designers Creating Accessible Interfaces A designer is building a landing page with a dark navy background and light gray text. The combination looks elegant on their monitor, but the contrast checker reveals a ratio of only 3.8:1 — failing AA for body text. The designer lightens the text slightly, achieving 4.6:1, and now the page is readable for users with low vision without sacrificing the dark aesthetic.

Developers Implementing Design Systems A developer maintains a component library with dozens of color tokens. Before releasing a new theme, they run every text-and-background pair through the contrast checker. Catching failures early prevents accessibility bugs from reaching production and avoids the costly rework of redesigning components after an audit.

Content Creators Formatting Documents A marketer creates a PDF guide with colored callout boxes and highlighted text. They use the contrast checker to verify that every text color on every background passes WCAG AA. This ensures the PDF is accessible when converted to HTML or read by screen readers, and it protects the organization from accessibility-related complaints.

Product Managers Running Accessibility Audits A PM is preparing for a VPAT (Voluntary Product Accessibility Template) review. They use the contrast checker to test every color combination in their application against WCAG standards, documenting the ratios for each. This creates an audit trail that demonstrates due diligence and compliance.

Educators Creating Learning Materials A teacher builds an online course with slides, quizzes, and reading materials. They check every text-and-background combination to ensure students with visual impairments can participate equally. High contrast also benefits students watching lectures on phones or tablets in varying lighting conditions.

Mobile App Designers Mobile screens are viewed everywhere — outdoors in sunlight, indoors under fluorescent lights, and in bed with night mode enabled. A contrast checker helps designers account for these variable conditions by ensuring combinations have enough headroom to remain readable when brightness is low, screens are dirty, or anti-glare filters are applied.

Tips and Best Practices

• Aim for AAA when possible. While AA is the legal minimum in most jurisdictions, AAA provides a better experience for everyone. If your brand colors can achieve 7:1 without clashing, use them. The small visual trade-off is worth the massive accessibility gain.
• Do not rely on color alone. Even with perfect contrast, color is not accessible to everyone. Colorblind users may not distinguish red from green. Always pair color with icons, labels, patterns, or text to convey meaning.
• Test your entire palette. A design system might have ten text colors and ten background colors. That is one hundred possible combinations. Systematically testing every pair — or at least the most common ones — prevents accessibility failures from creeping in.
• Check focus states and interactive elements. Buttons, links, form fields, and toggles need at least 3:1 contrast against their surrounding area. A button that passes for text might fail as a UI component if its border is too subtle.
• Account for transparency and overlays. If your text sits on an image or a semi-transparent overlay, the effective background is a blend of colors. The contrast checker tests solid colors, so for overlays you need to calculate the blended result first or test conservatively.
• Test at different zoom levels. Users with low vision zoom in to 200 percent or more. At high zoom, text appears larger, which helps, but the relative contrast stays the same. Ensure your ratios are strong enough to hold up under magnification.
• Document your ratios. When you finalize a color pair, record its contrast ratio in your design system documentation. This helps future designers and developers maintain accessibility as the product evolves.

Frequently Asked Questions

Is the Contrast Checker free to use?

Yes. The Contrast Checker is completely free with no usage limits, no registration, and no ads. You can test as many color combinations as you need.

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines. It is an internationally recognized standard published by the W3C that defines how to make web content accessible to people with disabilities. WCAG 2.1 is the current version, and WCAG 2.2 adds additional criteria. The guidelines are organized into three levels: A (minimum), AA (standard), and AAA (enhanced).

What contrast ratio do I need to pass WCAG AA?

For normal text (under 18pt or 14pt bold), you need at least 4.5:1. For large text (18pt or larger, or 14pt bold or larger) and UI components like buttons and form fields, you need at least 3:1.

What is the difference between WCAG AA and AAA?

AA is the standard compliance level required by most accessibility laws and guidelines worldwide, including Section 508 in the United States and the European Accessibility Act. AAA is an enhanced level that provides greater accessibility but is not required everywhere and is sometimes considered overly strict for general web content. For AAA, normal text needs 7:1 contrast and large text needs 4.5:1.

Can I test RGB or HSL colors?

The tool accepts HEX color input directly. If you have RGB or HSL values, use our Color Picker tool first to convert them to HEX. Enter the HEX code into the Contrast Checker and test instantly.

Does this tool work on mobile devices?

Yes. The Contrast Checker is fully responsive and works on smartphones and tablets. The color pickers, preview text, and results table are all optimized for touchscreens and smaller screens.

Can I use this for print design?

While WCAG is specifically designed for digital content, the contrast principles apply to print as well. A ratio of 4.5:1 or higher generally ensures readable text in printed materials. However, print designers should also consider ink coverage, paper quality, and viewing distance in addition to digital contrast ratios.

What happens if my brand colors fail WCAG?

If your brand colors do not meet the required ratio, you have several options. Lighten or darken the text slightly. Increase the font size so the text qualifies as "large text," which requires a lower ratio. Add a text shadow or outline to increase perceived contrast. Or use the non-compliant color only for decorative elements and choose an accessible alternative for functional text.