WCAG defines large as 18pt regular or 14pt bold and up. At those sizes, lower contrast (3:1 for AA, 4.5:1 for AAA) is acceptable because the larger glyphs are easier to discriminate. Heading text (h1, h2) is usually large enough; body copy and labels usually count as 'normal' and need higher contrast.

Is AA the legal minimum?

In most jurisdictions, yes. US: ADA settlements regularly cite WCAG 2.0 / 2.1 AA. EU: European Accessibility Act (EAA, effective 2025) requires AA for most digital products. UK: Equality Act + Public Sector Bodies (Websites and Mobile Applications) Regulations 2018 require AA for public-sector. Private companies aren't always strictly bound but lawsuit risk is real and rising — most enterprise sites target AA as default.

Why does luminance matter, not just RGB?

Because the eye is far more sensitive to green than red or blue. So a dark green and a similar-luminance dark red look different in 'darkness' to a viewer with normal color vision; for a deuteranope (red-green color-blind, ~5% of men), they may look indistinguishable. Luminance-based contrast captures the perceptual reality. Two colors at the same RGB distance from each other can have wildly different luminance contrast.

What ratio does pure black on pure white have?

21:1 — the theoretical maximum. Most well-designed text combinations land at 7-15:1. Most failing combinations are 2-4:1 — usually subtle pastels, gray-on-gray for stylized branding, or text-on-photo where the background varies.

Does the rule apply to icons, logos, and graphics?

WCAG 2.1 AA's contrast rule applies to TEXT specifically. SC 1.4.11 (added in 2.1) extends to non-text 'UI components' (focus indicators, button outlines) at 3:1. Decorative imagery is exempt. Logos with their official brand colors can get an exemption ('logotype'). For text rendered on a photographic background, the contrast must meet the standard against the image's relevant pixels.

How do I test against a gradient or photo background?

Sample the lowest-contrast spot — find the part of the background where the text would be hardest to read. If contrast there meets WCAG, you're good. If only some parts of the background pass, redesign: add a semi-opaque overlay to flatten the background contrast, or move text to a contrasting solid region.

Developer Utilities · Free tool

Color Contrast Checker

Check color contrast against WCAG 2.x AA and AAA standards. Test foreground vs background instantly online, no signup needed for quick accessibility audits.

Updated June 2026

Foreground (text)

Background

Sample heading

Body paragraph at normal size and weight.

Small fine print at the legal-text size.

Contrast ratio

5.47:1

✓ Pass — WCAG AA — Normal text

Threshold: ≥ 4.5:1

✓ Pass — WCAG AA — Large text (18pt+)

Threshold: ≥ 3:1

✗ Fail — WCAG AAA — Normal text

Threshold: ≥ 7:1

✓ Pass — WCAG AAA — Large text

Threshold: ≥ 4.5:1

Uses the WCAG 2.x contrast formula. AA is the standard most sites target; AAA is for accessibility-critical contexts. "Large" = 18pt regular or 14pt bold and up. WCAG 3 (in development) uses a different algorithm (APCA) that gives more accurate perceptual readings.

Found this useful?Email Buy Me a Coffee

What it does

Test foreground vs background color combinations against the WCAG 2.x accessibility contrast standards. Pick text color and background color, the tool computes the contrast ratio (1:1 = identical / invisible; 21:1 = maximum, e.g. pure black on pure white) and checks whether it passes:

WCAG AA (the legal-floor standard for most jurisdictions, including ADA in the US): 4.5:1 for normal text, 3:1 for large text.
WCAG AAA (stricter, for accessibility- focused organizations): 7:1 for normal text, 4.5:1 for large text.

Why contrast matters: roughly 4-8% of men and 0.5% of women have color vision deficiency (CVD / color blindness); 1-2% of adults have low vision (uncorrectable visual acuity below 20/40); millions more have age-related contrast sensitivity loss. Low- contrast text is unreadable for these users — and fatiguing for everyone in poor lighting (sunny outdoor conditions, dim cafés, night-mode glances).

The contrast ratio formula uses luminance (perceptual brightness), not raw RGB values. Two colors with the same RGB distance can have wildly different perceptual contrast because the eye is more sensitive to green than red or blue. The tool computes this correctly using the WCAG formula: relative luminance based on linearized RGB components weighted (0.2126R + 0.7152G + 0.0722B), then contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/color-contrast-checker" width="100%" height="720" frameborder="0" loading="lazy" title="Color Contrast Checker" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Pick foreground (text) color via the picker or paste a hex code.
Pick background color the same way.
Read the contrast ratio (e.g. '4.8:1') and the pass/fail status for each WCAG level (AA normal, AA large, AAA normal, AAA large).
If failing AA, adjust colors. Make text darker (or background lighter) to increase contrast. Sliders or value adjusters help find a passing combo close to your brand colors.
Test the actual rendered text on a real page — sometimes compositing (semi-transparent overlays, shadows, gradients) reduces effective contrast below what color-only checks suggest.

When to use this tool

Designing accessible web pages where text must meet WCAG.
Reviewing brand colors against accessibility standards (especially for marketing copy on colored backgrounds).
Testing dark-mode designs — those often have unique low-contrast issues that don't show in light mode.
Compliance auditing for ADA / EAA / WCAG-2.1 AA legal requirements.

When not to use it

Design decisions beyond pure text-on-background — for buttons with gradients, layered semi-transparent elements, or photographic backgrounds, the simple two-color check undershoots actual contrast complexity. Test with a screenshot in tools like Stark or axe DevTools.
Color-blind simulation — the tool checks luminance contrast (works for everyone), not specifically CVD patterns. For CVD checks use Coblis or Sim Daltonism.
Print contrast — print contrast metrics are different (ink density, paper reflectance). WCAG is web-specific.

Common use cases

Pre-decision sanity-check on inputs and outputs
Educational use — demonstrating the underlying concept
Onboarding a colleague who needs the same calculation/conversion
Verifying a number or output before passing it on

Frequently asked questions

What's 'large text'?: WCAG defines large as 18pt regular or 14pt bold and up. At those sizes, lower contrast (3:1 for AA, 4.5:1 for AAA) is acceptable because the larger glyphs are easier to discriminate. Heading text (h1, h2) is usually large enough; body copy and labels usually count as 'normal' and need higher contrast.
Is AA the legal minimum?: In most jurisdictions, yes. US: ADA settlements regularly cite WCAG 2.0 / 2.1 AA. EU: European Accessibility Act (EAA, effective 2025) requires AA for most digital products. UK: Equality Act + Public Sector Bodies (Websites and Mobile Applications) Regulations 2018 require AA for public-sector. Private companies aren't always strictly bound but lawsuit risk is real and rising — most enterprise sites target AA as default.
Why does luminance matter, not just RGB?: Because the eye is far more sensitive to green than red or blue. So a dark green and a similar-luminance dark red look different in 'darkness' to a viewer with normal color vision; for a deuteranope (red-green color-blind, ~5% of men), they may look indistinguishable. Luminance-based contrast captures the perceptual reality. Two colors at the same RGB distance from each other can have wildly different luminance contrast.
What ratio does pure black on pure white have?: 21:1 — the theoretical maximum. Most well-designed text combinations land at 7-15:1. Most failing combinations are 2-4:1 — usually subtle pastels, gray-on-gray for stylized branding, or text-on-photo where the background varies.
Does the rule apply to icons, logos, and graphics?: WCAG 2.1 AA's contrast rule applies to TEXT specifically. SC 1.4.11 (added in 2.1) extends to non-text 'UI components' (focus indicators, button outlines) at 3:1. Decorative imagery is exempt. Logos with their official brand colors can get an exemption ('logotype'). For text rendered on a photographic background, the contrast must meet the standard against the image's relevant pixels.
How do I test against a gradient or photo background?: Sample the lowest-contrast spot — find the part of the background where the text would be hardest to read. If contrast there meets WCAG, you're good. If only some parts of the background pass, redesign: add a semi-opaque overlay to flatten the background contrast, or move text to a contrasting solid region.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →