How does this WCAG AAA contrast calculator work?

Enter text and background colors as 6-digit hex (or 3-digit shorthand like #FFF). The tool converts each color to sRGB, computes relative luminance per WCAG 2.x, then contrast ratio = (Llighter + 0.05) / (Ldarker + 0.05). It compares the ratio to thresholds for your text context: normal text needs 4.5:1 for AA and 7:1 for AAA; large text (or normal bold treated as large in this tool) needs 3:1 AA and 4.5:1 AAA. Example: #111111 on #FFFFFF → 18.88:1 — passes both levels for normal text.

What contrast ratio is required for WCAG AAA normal text?

Success Criterion 1.4.6 Contrast (Enhanced) Level AAA requires at least 7:1 for normal text and images of text. Level AA (SC 1.4.3) requires 4.5:1 for normal text. Large text under AAA needs 4.5:1; large text under AA needs 3:1. “Large” means 18pt (24px) regular or 14pt (18.66px) bold, or larger. Many government and healthcare sites target AAA for body copy; commercial sites often certify at AA while using AAA for primary content areas.

What is the difference between WCAG AA and AAA contrast?

AA is the legal and procurement baseline in many jurisdictions (ADA-aligned websites, EN 301 549, Section 508). AAA is stricter and improves readability for low vision, glare, and aging eyes — but WCAG does not require AAA for every site. A pair can pass AA and fail AAA: #767676 on #FFFFFF is 4.54:1 — passes AA (≥4.5) by a hair but fails AAA (<7). To reach AAA from that gray, darken text toward #4D4D4D (8.45:1) or use a darker background.

Why do text size and bold weight change the pass/fail result?

Larger glyphs and heavier strokes are easier to recognize at lower contrast. WCAG allows reduced thresholds for large text. This calculator treats “large text” OR “normal size + bold weight” as the large-text bucket (matching common checker behavior). If you have 16px bold body copy, select large text explicitly for accurate thresholds — do not rely on bold alone unless your typography truly meets WCAG large definitions.

How is contrast ratio calculated from hex colors?

Steps: (1) Expand #RGB to #RRGGBB. (2) For each channel, divide by 255 and apply the piecewise gamma transform (≤0.03928 → linear; else power 2.4). (3) L = 0.2126×R + 0.7152×G + 0.0722×B. (4) Ratio = (max(L1,L2)+0.05)/(min(L1,L2)+0.05). Order of text vs background does not matter. The formula ignores alpha transparency — semi-transparent text over images needs compositing against the effective background color first.

Does this calculator support rgba, HSL, or gradient backgrounds?

This version accepts solid hex colors only. For rgba overlays, flatten to the color actually rendered (e.g. black at 60% opacity on white ≈ #666666). For gradients, test the worst-case segment — usually the lowest-contrast stop behind text. For photography, sample the pixel region behind text or add a solid scrim. Our general contrast ratio accessibility calculator follows the same math; use design-tool plugins (Figma, Stark) for live compositing.

Do brand colors have to meet WCAG AAA?

Not legally required for most private sites at Level AA conformance. Brand palettes often keep light brand hues for marketing heroes while using AAA-safe neutrals (#111, #333) for body text on white. Strategy: define design tokens — primary-900 for text, primary-100 for backgrounds — each token pre-validated at AAA. Never use brand orange at 3.5:1 on white for paragraph text; restrict low-contrast brand colors to large headlines or decorative graphics with redundant text labels.

Should I test hover, focus, disabled, and dark mode states?

Yes. WCAG requires sufficient contrast in each state users encounter. Disabled text may be exempt if it is not “essential” — but best practice keeps readable contrast. Focus indicators must meet 3:1 against adjacent colors (SC 1.4.11). Dark mode is not automatic: #FFFFFF on #121212 often passes, but #8E8E8E on #121212 may fail AA. Re-run this calculator for each theme token pair. Test Windows high-contrast mode separately.

How does WCAG contrast relate to ADA compliance?

U.S. courts and DOJ guidance reference WCAG 2.x Level AA as the practical standard for public accommodations’ websites. AA includes 1.4.3 Contrast (Minimum). AAA (1.4.6) is optional but cited in some state and university policies. Passing this calculator’s AA check for all text tokens is a strong baseline for accessibility statements and procurement RFPs. Document failures and remediation in VPATs or ACRs.

How can I fix a color pair that fails AA or AAA?

Increase luminance difference: darken text, lighten background, or both. On white backgrounds, body text below #767676 usually fails AAA; #595959–#4D4D4D range reaches 7:1+. Use HSL: hold hue, adjust lightness in 5% steps, re-check ratio. For links, underline + color (do not rely on color alone — SC 1.4.1). After adjustment, verify focus rings and button labels still pass. Re-test with daltonism simulators — contrast ratio does not guarantee distinguishability for color-blind users.

What is the difference between this tool and your contrast ratio accessibility calculator?

Both use WCAG luminance math. This page emphasizes AAA thresholds, large/bold context, and stricter planning copy for design systems targeting enhanced conformance. The contrast ratio accessibility calculator covers the same core ratio with overlapping use cases — use either for hex pairs; use this one when RFPs explicitly require AAA validation and pass/fail at 7:1 for body text.

Which calculators should I use with contrast checking?

Font size accessibility for minimum readable sizes; text zoom readability for 200% zoom reflow; cognitive load score for complex forms with many colored states; touchscreen tap target size for buttons that may use low-contrast fills; braille and signage calculators for physical contrast (APCA is emerging for digital but WCAG 2.2 still uses this ratio). Build contrast into tokens before development to avoid expensive retrofits.

theCalcs

Get Custom Solution

Loading calculators...

Q: Why do text size and bold weight change the pass/fail result?

Larger glyphs and heavier strokes are easier to recognize at lower contrast. WCAG allows reduced thresholds for large text. This calculator treats “large text” OR “normal size + bold weight” as the large-text bucket (matching common checker behavior). If you have 16px bold body copy, select large text explicitly for accurate thresholds — do not rely on bold alone unless your typography truly meets WCAG large definitions.

Q: How is contrast ratio calculated from hex colors?

Steps: (1) Expand #RGB to #RRGGBB. (2) For each channel, divide by 255 and apply the piecewise gamma transform (≤0.03928 → linear; else power 2.4). (3) L = 0.2126×R + 0.7152×G + 0.0722×B. (4) Ratio = (max(L1,L2)+0.05)/(min(L1,L2)+0.05). Order of text vs background does not matter. The formula ignores alpha transparency — semi-transparent text over images needs compositing against the effective background color first.

Q: Does this calculator support rgba, HSL, or gradient backgrounds?

This version accepts solid hex colors only. For rgba overlays, flatten to the color actually rendered (e.g. black at 60% opacity on white ≈ #666666). For gradients, test the worst-case segment — usually the lowest-contrast stop behind text. For photography, sample the pixel region behind text or add a solid scrim. Our general contrast ratio accessibility calculator follows the same math; use design-tool plugins (Figma, Stark) for live compositing.

Q: Do brand colors have to meet WCAG AAA?

Not legally required for most private sites at Level AA conformance. Brand palettes often keep light brand hues for marketing heroes while using AAA-safe neutrals (#111, #333) for body text on white. Strategy: define design tokens — primary-900 for text, primary-100 for backgrounds — each token pre-validated at AAA. Never use brand orange at 3.5:1 on white for paragraph text; restrict low-contrast brand colors to large headlines or decorative graphics with redundant text labels.

Q: Should I test hover, focus, disabled, and dark mode states?

Yes. WCAG requires sufficient contrast in each state users encounter. Disabled text may be exempt if it is not “essential” — but best practice keeps readable contrast. Focus indicators must meet 3:1 against adjacent colors (SC 1.4.11). Dark mode is not automatic: #FFFFFF on #121212 often passes, but #8E8E8E on #121212 may fail AA. Re-run this calculator for each theme token pair. Test Windows high-contrast mode separately.

Q: How does WCAG contrast relate to ADA compliance?

U.S. courts and DOJ guidance reference WCAG 2.x Level AA as the practical standard for public accommodations’ websites. AA includes 1.4.3 Contrast (Minimum). AAA (1.4.6) is optional but cited in some state and university policies. Passing this calculator’s AA check for all text tokens is a strong baseline for accessibility statements and procurement RFPs. Document failures and remediation in VPATs or ACRs.

Q: How can I fix a color pair that fails AA or AAA?

Increase luminance difference: darken text, lighten background, or both. On white backgrounds, body text below #767676 usually fails AAA; #595959–#4D4D4D range reaches 7:1+. Use HSL: hold hue, adjust lightness in 5% steps, re-check ratio. For links, underline + color (do not rely on color alone — SC 1.4.1). After adjustment, verify focus rings and button labels still pass. Re-test with daltonism simulators — contrast ratio does not guarantee distinguishability for color-blind users.

Fetching calculator categories and tools for this section.

Go to Calculators Browse Calculators

theCalcs

Get Custom Solution

Loading the page...

Preparing tools and content for you. This usually takes a second.

Go Home Browse Calculators

theCalcs

Get Custom Solution

WCAG 2.2 · SC 1.4.3 & 1.4.6

Color Contrast WCAG AAA Calculator — AA & Ratio Checker

Free WCAG contrast calculator for designers and developers. Test hex text and background pairs for contrast ratio (e.g. 7:1 for AAA body text), WCAG AA and AAA pass/fail, with live preview. Also see our contrast ratio accessibility calculator.

Last updated: May 24, 2026

Official WCAG relative luminance formula (sRGB)

Normal text: 4.5:1 AA · 7:1 AAA — Large/bold: 3:1 / 4.5:1

Live color preview in the form results panel

Sizing type for low vision? Font size accessibility calculator

WCAG AAA Contrast Calculator

Check color contrast ratio and accessibility pass/fail status for WCAG AA and AAA standards.

Text Color (Hex)

Background Color (Hex)

Text Size Type

Text Weight

Contrast Summary

Contrast Ratio

18.88:1

WCAG AA

Pass

WCAG AAA

Pass

Excellent contrast. This pair meets WCAG AAA guidance for the selected text context.

Live preview of selected color combination for quick visual validation.

Custom Integration

Need this calculator embedded on your site?

We can build and embed a custom version of Color Contrast WCAG AAA Calculator for your brand and workflow.

Request Embedded Version View Integration Services

What This WCAG AAA Calculator Evaluates

Answers: does this text color pass WCAG AAA on this background, and what ratio do I need? Solid hex only — composite translucent colors manually first.

Contrast Ratio

L1 vs L2 luminance

Standardized 1:1 to 21:1 scale — white on black approaches 21:1.

AA vs AAA

1.4.3 and 1.4.6

Level AA for conformance baselines; AAA for enhanced readability targets.

Text Context

Normal vs large

Thresholds change with size and weight — same hex pair can pass large text and fail body copy.

Quick Example Result

Default: #111111 on #FFFFFF, normal text → ratio 18.88:1, AA Pass (≥4.5:1), AAA Pass (≥7:1).

Contrast Ratio

18.88:1

WCAG AA

Pass

WCAG AAA

Pass

Common miss: #767676 on white = 4.54:1 — AA Pass, AAA Fail.

WCAG 2.2 Contrast Thresholds & Sample Pairs

Required Ratios by Text Type

Context	AA (1.4.3)	AAA (1.4.6)	Notes
Normal text (regular weight)	4.5:1	7:1	Body copy, labels, form fields under ~18pt / 14pt bold
Large text (or normal + bold)	3:1	4.5:1	≥18pt regular or ≥14pt bold per WCAG definition
Non-text UI (SC 1.4.11)	3:1	—	Icons, focus rings, graphical objects — not calculated here

Common Hex Pair Results

Pair	Ratio	AA	AAA
Default — near-black on white	18.88:1	Pass	Pass
Body gray — AA only (#767676 on white)	4.54:1	Pass	Fail
Brand dark on off-white (#2C2C2C / #FDFDFD)	13.73:1	Pass	Pass
Fail — light gray on white (#BBBBBB)	1.92:1	Fail	Fail

How Our Contrast Model Works

WCAG contrast is based on relative luminance, not perceived hue. Two colors with the same lightness but different hues can have different ratios — yellow-on-white fails faster than blue-on-white at similar hex “darkness.”

Model Snapshot

L = f(R), f(G), f(B) with WCAG gamma curveRatio = (Lmax + 0.05) / (Lmin + 0.05)Pass if ratio ≥ threshold for normal or large text context

Practical accessibility checklist

Validate primary, secondary, and muted text tokens on each background token
Do not use color alone for errors — add icons and text (SC 1.4.1)
Check placeholder text contrast — often forgotten in forms
Test light and dark themes independently
Document passing pairs in your design system README
Automate regression with CI contrast lint on token JSON

Sources & References

WCAG 2.2 — 1.4.3 Contrast (Minimum)Level AA contrast requirements.
WCAG 2.2 — 1.4.6 Contrast (Enhanced)Level AAA 7:1 / 4.5:1 requirements.
W3C — Understanding ContrastExamples, exceptions, and large text definition.

Pair contrast validation with font size, zoom, and cognitive load tools for complete interface accessibility.

Explore Accessibility & Ergonomics Calculators

Example WCAG Contrast Calculations

App Theme — Passes AAA

#2C2C2C on #FDFDFD, normal text

Ratio = 13.73:1 — AA and AAA Pass for normal body copy. Suitable for primary reading text on off-white app shells.

Muted Gray — AA Pass, AAA Fail

#767676 on #FFFFFF

Result

Ratio: 4.54:1
AA: Pass (needs ≥4.5:1)
AAA: Fail (needs ≥7:1)

Fix for AAA

Darken text to ~#4D4D4D (8.45:1) or darker. This pattern is common when teams use #767676 for secondary text copied from Material Design without checking AAA targets.

Placeholder Gray — Fails AA

#BBBBBB on #FFFFFF

Ratio = 1.92:1 — fails AA and AAA for normal text. Typical of placeholder and disabled styles — replace with ≥#767676 for AA minimum or darker for AAA.

Frequently Asked Questions

Found This Calculator Helpful?

Share it with designers and developers building WCAG-aligned color systems.

Share This Calculator

Help others discover this useful tool

Copy Link

Share on Social Media

X Facebook LinkedIn WhatsApp

Share via Email

Suggested hashtags: #Accessibility #WCAG #DesignSystem #ContrastRatio #InclusiveDesign

Related Calculators

Contrast Ratio Accessibility Calculator

Core WCAG contrast checking for text and background hex pairs.

Use Calculator

Font Size Accessibility Calculator

Pair readable font sizes with contrast-validated color tokens.

Use Calculator

Text Zoom Readability Calculator

Verify layouts survive 200% zoom after color passes at default size.

Use Calculator

Cognitive Load Score Calculator

Reduce form complexity so users can read challenging color pairs.

Use Calculator

Screen Magnification Ratio Calculator

Low-vision zoom levels compound the need for AAA contrast.

Use Calculator

Touchscreen Tap Target Size Calculator

Button boundaries and focus rings need 3:1 non-text contrast too.

Use Calculator

theCalcs

Get Custom Solution

Loading calculators...

Fetching calculator categories and tools for this section.

Go to Calculators Browse Calculators

theCalcs

Get Custom Solution

WCAG 2.2 · SC 1.4.3 & 1.4.6

Color Contrast WCAG AAA Calculator — AA & Ratio Checker

Last updated: May 24, 2026

Official WCAG relative luminance formula (sRGB)

Normal text: 4.5:1 AA · 7:1 AAA — Large/bold: 3:1 / 4.5:1

Live color preview in the form results panel

Sizing type for low vision? Font size accessibility calculator

WCAG AAA Contrast Calculator

Check color contrast ratio and accessibility pass/fail status for WCAG AA and AAA standards.

Text Color (Hex)

Background Color (Hex)

Text Size Type

Text Weight

Contrast Summary

Contrast Ratio

18.88:1

WCAG AA

Pass

WCAG AAA

Pass

Excellent contrast. This pair meets WCAG AAA guidance for the selected text context.

Live preview of selected color combination for quick visual validation.

Custom Integration

Need this calculator embedded on your site?

We can build and embed a custom version of Color Contrast WCAG AAA Calculator for your brand and workflow.

Request Embedded Version View Integration Services

What This WCAG AAA Calculator Evaluates

Answers: does this text color pass WCAG AAA on this background, and what ratio do I need? Solid hex only — composite translucent colors manually first.

Contrast Ratio

L1 vs L2 luminance

Standardized 1:1 to 21:1 scale — white on black approaches 21:1.

AA vs AAA

1.4.3 and 1.4.6

Level AA for conformance baselines; AAA for enhanced readability targets.

Text Context

Normal vs large

Thresholds change with size and weight — same hex pair can pass large text and fail body copy.

Quick Example Result

Default: #111111 on #FFFFFF, normal text → ratio 18.88:1, AA Pass (≥4.5:1), AAA Pass (≥7:1).

Contrast Ratio

18.88:1

WCAG AA

Pass

WCAG AAA

Pass

Common miss: #767676 on white = 4.54:1 — AA Pass, AAA Fail.

WCAG 2.2 Contrast Thresholds & Sample Pairs

Required Ratios by Text Type

Context	AA (1.4.3)	AAA (1.4.6)	Notes
Normal text (regular weight)	4.5:1	7:1	Body copy, labels, form fields under ~18pt / 14pt bold
Large text (or normal + bold)	3:1	4.5:1	≥18pt regular or ≥14pt bold per WCAG definition
Non-text UI (SC 1.4.11)	3:1	—	Icons, focus rings, graphical objects — not calculated here

Common Hex Pair Results

Pair	Ratio	AA	AAA
Default — near-black on white	18.88:1	Pass	Pass
Body gray — AA only (#767676 on white)	4.54:1	Pass	Fail
Brand dark on off-white (#2C2C2C / #FDFDFD)	13.73:1	Pass	Pass
Fail — light gray on white (#BBBBBB)	1.92:1	Fail	Fail

How Our Contrast Model Works

Model Snapshot

L = f(R), f(G), f(B) with WCAG gamma curveRatio = (Lmax + 0.05) / (Lmin + 0.05)Pass if ratio ≥ threshold for normal or large text context

Practical accessibility checklist

Validate primary, secondary, and muted text tokens on each background token
Do not use color alone for errors — add icons and text (SC 1.4.1)
Check placeholder text contrast — often forgotten in forms
Test light and dark themes independently
Document passing pairs in your design system README
Automate regression with CI contrast lint on token JSON

Sources & References

WCAG 2.2 — 1.4.3 Contrast (Minimum)Level AA contrast requirements.
WCAG 2.2 — 1.4.6 Contrast (Enhanced)Level AAA 7:1 / 4.5:1 requirements.
W3C — Understanding ContrastExamples, exceptions, and large text definition.

Pair contrast validation with font size, zoom, and cognitive load tools for complete interface accessibility.

Explore Accessibility & Ergonomics Calculators

Example WCAG Contrast Calculations

App Theme — Passes AAA

#2C2C2C on #FDFDFD, normal text

Ratio = 13.73:1 — AA and AAA Pass for normal body copy. Suitable for primary reading text on off-white app shells.

Muted Gray — AA Pass, AAA Fail

#767676 on #FFFFFF

Result

Ratio: 4.54:1
AA: Pass (needs ≥4.5:1)
AAA: Fail (needs ≥7:1)

Fix for AAA

Darken text to ~#4D4D4D (8.45:1) or darker. This pattern is common when teams use #767676 for secondary text copied from Material Design without checking AAA targets.

Placeholder Gray — Fails AA

#BBBBBB on #FFFFFF

Ratio = 1.92:1 — fails AA and AAA for normal text. Typical of placeholder and disabled styles — replace with ≥#767676 for AA minimum or darker for AAA.