/>
BunchTool — WCAG 2.1 Contrast Checker
🎨 Color Pair & Live Render Preview

Large Display Heading (18pt Bold)

Subheading Section Title (14pt Bold)

This is standard body copy text designed to evaluate accessibility contrast compliance under WCAG 2.1 AA (4.5:1) and AAA (7.0:1) requirements. Ensure your UI typography remains clearly readable for all users.

Input Label:
🏆 WCAG 2.1 Contrast Audit & Scores
Contrast Ratio
21.00 : 1
1:1 3:1 (AA Large) 4.5:1 (AA Normal) 7:1 (AAA) 21:1
AA Normal Text (4.5:1): PASS ✅
AA Large Text (3.0:1): PASS ✅
AA UI Components (3.0:1): PASS ✅
AAA Normal Text (7.0:1): PASS ✅
AAA Large Text (4.5:1): PASS ✅
Related Tools

More free Design tools


🎨 Image & Design Tools

Contrast Checker —
Free Online WCAG 2.1 Color Contrast Audit

Our free Contrast Checker enables web designers, accessibility auditors, and front-end engineers to verify text legibility and color contrast ratios against WCAG 2.1 AA and AAA guidelines. Computes relative luminance across sRGB gamma-linearized color spaces using ITU-R BT.709 weighting (0.2126R + 0.7152G + 0.0722B) for text, headings, buttons, and UI components. Features a live multi-element text preview canvas, EyeDropper screen sampling, 1-click color swapper, and a smart contrast fixer that auto-suggests compliant HEX colors—executing 100% in local browser JavaScript with zero server transmission.

Relative luminance evaluation using sRGB gamma-linearized piecewise equations
Simultaneous WCAG 2.1 AA and AAA accessibility scoring for body copy and UI elements
Smart contrast fixer auto-suggesting compliant color variations when ratios fail
EyeDropper API integration with 1-click foreground and background color swapper
👁️
21:1 Max RatioBlack on White
WCAG 2.1AA & AAA Criteria
sRGB LinearLuminance Math
How It Works

Use Contrast Checker in three steps

Step 1
🎨
Pick Colors or Sample Screen

Select text and background colors using color pickers, HEX inputs, or the EyeDropper tool.

Step 2
👁️
Inspect Ratio & Live Render

View the live text preview across headings, body copy, and buttons while checking the numerical contrast ratio.

Step 3
🏆
Verify Compliance & Fix

Review the 5 WCAG 2.1 AA/AAA badges. If contrast fails, click an auto-suggested passing color.

Why BunchTool

Why use our free Contrast Checker?

👁️
Live Multi-Element Text Rendering

Renders your exact foreground and background colors across headings, body copy, form labels, and UI buttons in real time.

⚖️
Full WCAG 2.1 AA & AAA Coverage

Evaluates 5 distinct accessibility standards simultaneously, certifying compliance for normal body text, large display type, and UI graphic components.

💡
Smart Auto-Fixer & Privacy Sandbox

Recommends adjusted lighter or darker color variations when ratios fall short of WCAG AA, executing 100% locally in your browser with zero server transmission.

Detailed Guide

How WCAG Relative Luminance & Contrast Math Works: sRGB Linearisation & Threshold Criteria

The Web Content Accessibility Guidelines (WCAG 2.1) specify color contrast as the ratio of relative luminance between two colors. Relative luminance (L) measures perceived brightness normalized from 0 (pure black) to 1 (pure white). Before calculating luminance, sRGB color values must be converted from non-linear gamma-encoded space into linear light intensities using the piecewise linearisation equation: V = c ≤ 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055)^2.4.

Once linearized, the R, G, and B channels are weighted using ITU-R BT.709 spectral efficiency factors: L = 0.2126 * R + 0.7152 * G + 0.0722 * B. The contrast ratio between two colors is then calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Adding 0.05 accounts for ambient light scatter and prevents division by zero. Standard text requires at least 4.5:1 for Level AA and 7.0:1 for Level AAA compliance.

When color combinations fall below accessibility thresholds, our Smart Contrast Fixer evaluates your base hue in HSL space and automatically computes nearest-neighbor lightness values that pass WCAG AA (4.5:1) or AAA (7.0:1). This allows UI/UX designers to preserve original brand identity while guaranteeing screen legibility across mobile displays, high-glare environments, and assistive reading technology.

FAQ

Frequently asked questions

What contrast ratio is required to pass WCAG AA level compliance?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal body text (below 18pt or 14pt bold) and 3.0:1 for large text (18pt or 14pt bold and above) or UI elements.
What is the difference between WCAG AA and AAA contrast levels?
WCAG AA is the standard legal baseline for accessibility compliance. WCAG AAA is the enhanced tier requiring a contrast ratio of 7.0:1 for normal text and 4.5:1 for large text, catering to users with severe low vision.
How is the WCAG relative luminance contrast ratio calculated?
The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color. Channels are first linearized from sRGB gamma encoding and weighted with ITU-R BT.709 coefficients (0.2126R + 0.7152G + 0.0722B).
Can I audit colored text on colored backgrounds?
Yes. The tool accepts any valid HEX or RGB color pair for foreground and background, providing live rendered text previews across headings, body paragraphs, and interactive buttons.
Does this contrast checker store or upload my design palettes?
No. All luminance calculations run entirely within your local browser JavaScript engine. Your color selections are never transmitted to any external server.
Other Collections

Explore other useful categories

Explore 247 more free tools —
no login, no limits.

BunchTool covers PDF editing, text conversion, SEO analysis, calculators, design tools, unit converters and much more. All 100% free, all browser-based.

Browse All 247 tools →