What are the WCAG 2.1 contrast requirements?

AA, the legal minimum, requires 4.5:1 for normal text and 3:1 for large text (18pt and up, or 14pt bold). AAA, the recommended best practice, requires 7:1 for normal text and 4.5:1 for large. Non-text UI components like icons and borders need 3:1. ADA compliance generally requires AA, while AAA is preferred for educational and government sites where the audience may include more users with low vision.

Why does contrast matter?

It affects readability for everyone, not just users with disabilities. Roughly 10% of users have some form of low vision, around 8% of men have some color blindness, and aging eyes lose contrast sensitivity as part of presbyopia. Environmental factors like outdoor sunlight or a phone at low brightness reduce perceived contrast further. Sufficient contrast is what makes a design genuinely inclusive rather than only readable in ideal conditions.

How is contrast ratio calculated?

Per WCAG, you compute the relative luminance L of each color by gamma-correcting the RGB values and taking a weighted sum, then take the ratio (Lighter + 0.05) / (Darker + 0.05). Black has a luminance of 0 and white has 1, so pure black on white gives you (1 + 0.05) / (0 + 0.05), which works out to 21:1. The calculator handles the arithmetic, which is good because doing it by hand is tedious.

Why does my brand color fail contrast?

Most brand colors are chosen for aesthetics rather than accessibility, and a typical brand blue often comes in around 3-4:1 — which fails AA for body text. The standard fix is to use a darker variant for body text and reserve the brand color for decorative or large elements where the contrast requirements are lower. You can usually adjust the shade enough to meet the ratio while keeping the color recognizably on-brand.

Is gray-on-gray accessible?

Often it isn't. The common 'subtle gray on white' pattern with #888888 on #FFFFFF works out to 3.54:1, which fails AA for normal text. For body text on white, use #757575 or darker to clear the 4.5:1 threshold. Reserve lighter grays for placeholder text, decorative elements, and large-text contexts where the standards are more permissive.

What about text on images?

Variable image backgrounds make contrast measurement essentially impossible — you can't know in advance what color will be behind the text. The best practice is to control the contrast deliberately, by adding a semi-transparent overlay, blurring the background image, applying a text shadow, or putting the text on a solid color block. Don't assume that whatever is in the image will work as a background.

Are there alternatives to WCAG 2.1?

WCAG 3.0, currently in development, will use APCA — the Accessible Perceptual Contrast Algorithm — which is more accurate for human perception than the current ratio formula. APCA is already in use on some sites that want to lead the standard. Until WCAG 3.0 ships, the WCAG 2.1 ratio remains the official standard, and many tools now offer both calculations side by side.

Color Contrast Checker

Check WCAG color contrast ratios online for accessibility compliance. Free contrast checker with AA and AAA level pass/fail results.

Color Tools

Instant results

Text Color

Background Color

Contrast Ratio

21.00:1

AAA

WCAG Compliance

AA Normal TextPass

≥ 4.5:1 required

AA Large TextPass

≥ 3:1 required

AAA Normal TextPass

≥ 7:1 required

AAA Large TextPass

≥ 4.5:1 required

Preview

Sample Heading

This is sample text to preview the color contrast. Make sure your text is readable against the background color.

Small text should also be checked for readability. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

WCAG Guidelines:

Level AA: Normal text 4.5:1, Large text 3:1
Level AAA: Normal text 7:1, Large text 4.5:1
Large text: 18pt+ or 14pt+ bold

About Color Contrast Checker

Check color contrast ratios for WCAG accessibility compliance. Ensure your text is readable against its background color for users with visual impairments.

How to Use Color Contrast Checker

Enter the foreground color

Use the color picker or paste a hex or RGB code for the text color. This is typically your body text color or the text color used inside a button.

Enter the background color

Use the color picker or paste a hex or RGB code for the background. This is the page background, button background, or card background — whatever sits behind the foreground text.

View the contrast ratio

The checker shows the ratio (something like 4.5:1) along with pass or fail flags at WCAG AA (4.5:1 for normal text, 3:1 for large) and AAA (7:1 for normal, 4.5:1 for large).

Adjust if needed

If the pairing fails, darken the foreground or lighten the background. Aim for AA at minimum for legal compliance, or AAA for best practice. Most tools also suggest accessible alternatives close to your starting colors so you don't have to hunt for them yourself.

When to Use Color Contrast Checker

Accessibility compliance

WCAG 2.1 sets specific contrast ratio minimums — 4.5:1 for AA on normal text, 7:1 for AAA, and 3:1 for large text. The checker measures the contrast between any two colors and reports the compliance level. This matters for ADA compliance in the US, EU accessibility regulations, and Section 508 requirements for federal sites.

Dark mode design

Dark mode UIs reverse the usual contrast challenge. Instead of dark text on light backgrounds, you have light text on dark, and the same WCAG ratios still apply. The checker helps verify that your dark mode colors actually meet accessibility standards rather than just looking edgy. Useful when you're building theme switching or dual-mode designs.

Brand color verification

A brand color on a brand background often turns out to have insufficient contrast for body text. The checker reveals where compliance gaps exist before they become accessibility complaints. This shows up most in marketing materials, brand guideline definition, and any place where text sits on a branded element that hasn't been tested for readability.

Inclusive design and user testing

Sufficient contrast helps everyone, not just users with documented disabilities. Low vision, color blindness, environmental factors like sunlight glare on a phone screen — all of these benefit from designs that meet contrast standards. The checker is a fast way to verify your work for real-world conditions, not just the controlled lighting of an office.

Color Contrast Checker Examples

Black on white (best)

Input

Foreground: #000000, Background: #FFFFFF

Output

Ratio: 21:1 (the maximum possible). Passes both AA and AAA.

Pure black on pure white gives you the maximum possible contrast and always passes every standard. It can be visually harsh, though, which is why many designs use a slightly off-black like #222 to soften the effect while keeping the contrast comfortably high.

Subtle gray text

Input

Foreground: #888888, Background: #FFFFFF

Output

Ratio: 3.54:1. Fails AA for normal text. Passes AA Large for text 18pt and up or 14pt bold.

A common 'subtle' gray that fails AA for normal body text. It's only acceptable for large text (24px and up), placeholder text, or decorative non-essential elements. For normal body text, drop to #757575 or darker to actually meet AA.

Brand color check

Input

Foreground: #4A90E2 (blue), Background: #FFFFFF

Output

Ratio: 3.95:1. Fails AA for normal text but passes AA for large text. Fails AAA.

A common brand blue that fails AA for body text but works for headlines. Use a darker variant like #2D6CB6 (which gives you 6.7:1) for body. Brand colors frequently need a darker companion shade specifically for accessibility-sensitive uses.

Tips & Best Practices for Color Contrast Checker

1.Aim for AAA (7:1) whenever you reasonably can. AA at 4.5:1 is the minimum legal compliance level; AAA is the recommended best practice, and some users genuinely need that higher ratio to read comfortably.
2.Don't rely on color alone to communicate state. Pair color with icons, underlines, or patterns so the meaning still reads for users with color blindness. WCAG 1.4.1 covers this requirement.
3.Test designs in real conditions, not just in your design tool. Outdoor sunlight, low display brightness, and oblique viewing angles all reduce perceived contrast. Don't lean entirely on the calculator number.
4.Pick from an accessible color palette when starting a new project. Many design systems (Material Design, IBM Carbon, GitHub Primer) provide WCAG-compliant color systems where the swatches have been pre-validated for common pairings.
5.For text on images, add an overlay or background blur to control the contrast deliberately. Variable image backgrounds make it impossible to guarantee contrast otherwise, since you can't know what will be behind the text.
6.Don't sacrifice readability for aesthetics. Trendy subtle gray text consistently fails accessibility and frustrates users with anything less than perfect vision. Choose readable colors first, then make them feel branded.

Frequently Asked Questions

It's a numerical comparison of luminance between two colors. The range goes from 1:1 (no contrast at all — the colors are identical) to 21:1 (maximum contrast, which is pure black on pure white). WCAG accessibility standards specify minimums: 4.5:1 for AA on normal text, 7:1 for AAA, and 3:1 for large text. Higher ratios are more readable, especially for users with low vision.

Color Contrast Checker

WCAG Compliance

Preview

Sample Heading

About Color Contrast Checker

How to Use Color Contrast Checker

Enter the foreground color

Enter the background color

View the contrast ratio

Adjust if needed

When to Use Color Contrast Checker

Accessibility compliance

Dark mode design

Brand color verification

Inclusive design and user testing

Color Contrast Checker Examples

Black on white (best)

Subtle gray text

Brand color check

Tips & Best Practices for Color Contrast Checker

Frequently Asked Questions

Related Tools

Color Converter

HEX to RGB Converter

RGB to HEX Converter

Color Picker

Color Palette Generator

CSS Gradient Generator