What qualifies as large text under WCAG?

Large text is defined as at least 18pt (24px) regular weight or 14pt (18.66px) bold weight.

Does contrast apply to icons and borders?

Yes, WCAG 2.1 SC 1.4.11 requires at least 3:1 contrast for user interface components and graphical objects.

Can I test semi-transparent colors?

The calculator operates on solid RGB/Hex values. Alpha blend semi-transparent overlays against your solid background first.

Accessibility & A11y Tools• WCAG 2.1

WCAG Color Contrast Checker & Ratio Calculator

Ensure your digital products are accessible to all users. Test foreground and background color pairs against WCAG 2.1 compliance criteria with live AA and AAA rating indicators.

Processed 100% locally in your browser. No color data is transmitted.

Color Controls

Foreground (Text / Element)

Background Surface

Calculated Ratio

13.98: 1

AA Normal Text

PASS (4.5:1)

AA Large Text (18pt+)

PASS (3.0:1)

AAA Normal Text

PASS (7.0:1)

UI & Icons (SC 1.4.11)

PASS (3.0:1)

Accessible Typography & UI Preview

This interactive box previews your selected foreground and background colors in real time. Good visual contrast ensures your content remains effortless to read for all visitors, including those in high-glare environments.

Sponsored PlacementGoogle AdSense Integration Ready

How to Use WCAG Color Contrast Checker

Select Colors

Enter foreground and background hex codes or use the native color picker.

Evaluate Contrast

Review the calculated contrast ratio (e.g., 4.5:1 or 7.0:1) and compliance badges.

Preview Text Samples

Inspect how normal body text, bold headers, and UI components appear in real time.

About WCAG Color Contrast Checker

Uses the official W3C relative luminance algorithm: L = 0.2126 * R + 0.7152 * G + 0.0722 * B (with sRGB gamma decompression) to calculate the exact contrast ratio (L1 + 0.05) / (L2 + 0.05).

Supported Formats

HEXRGBHSL

Operational Limits

•Calculations conform to the standard relative luminance formula defined in WCAG 2.1.

Key Features

Real-time contrast ratio calculation up to 21:1
Instant WCAG 2.1 Level AA & AAA pass/fail validation
Support for normal text, large text (18pt+), and UI components
Interactive color swap toggle for quick background/text inversion
One-click copy for Hex values and contrast ratios

Frequently Asked Questions

WCAG Level AA requires a minimum contrast ratio of 4.5:1 for regular text, and Level AAA requires 7.0:1.

Related Tools

Color Blindness Simulator

Simulate how your design and color palettes appear to users with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.

Accessibility & A11y ToolsOpen Tool

WCAG 3 Beta Local

APCA Contrast Calculator

Calculate Advanced Perceptual Contrast Algorithm (APCA / WCAG 3) Lc values based on modern human spatial vision perception.

Accessibility & A11y ToolsOpen Tool

3:1 Threshold Local

Large Text Contrast Checker

Specialized WCAG validator for large typography (18pt/24px normal or 14pt/18.66px bold) requiring 3:1 minimum contrast.

Accessibility & A11y ToolsOpen Tool