WCAG Color Contrast Checker

Compare any foreground and background color pair against WCAG 2.1 AA and AAA thresholds for normal text, large text, and UI components.

Private by architecture: All processing is 100% client-side memory. Your data never leaves this browser tab.

Foreground (Text / Icon)

Swatch

HEX or RGB

R (0-255)

G (0-255)

B (0-255)

Relative luminance: 0.0208

Background (Surface)

Swatch

HEX or RGB

R (0-255)

G (0-255)

B (0-255)

Relative luminance: 0.9557

Contrast Ratio & WCAG 2.1 Matrix

Contrast Ratio

13.38:1

Category	Threshold	Status

Live Preview Box

Large Heading Text (24px / 18pt+)

Normal body paragraph text at 16px regular weight. Good contrast ensures comfortable reading across high-glare screens and low-vision contexts.

Nearest Passing Foreground Suggestions

About This Tool

The WCAG Color Contrast Checker computes the exact WCAG 2.1 contrast ratio (from 1:1 to 21:1) between any foreground and background color pair using the sRGB relative luminance formula.

Unlike single-color checkers that only test against pure white or pure black, this tool pairs any two custom colors via HEX, RGB channels, or native color pickers, evaluates normal text, large text, and UI component thresholds, and suggests the closest lightness adjustments when a pair fails.

Key Features

Foreground & background pickers: Enter HEX codes, adjust individual R/G/B numeric channels, or use native color pickers with one-click swap.
Exact WCAG 2.1 relative luminance: Applies the standard 0.04045 linear-transfer threshold and ITU-R BT.709 coefficients (0.2126 R, 0.7152 G, 0.0722 B).
Five compliance badges: Checks Normal Text AA (4.5:1), Normal Text AAA (7.0:1), Large Text AA (3.0:1), Large Text AAA (4.5:1), and UI Components AA (3.0:1).
Nearest passing color suggestions: Finds the smallest HSL lightness shift up or down that reaches 3.0:1, 4.5:1, or 7.0:1 against your background.

Frequently Asked Questions

What is the WCAG 2.1 contrast ratio formula?

Contrast ratio is defined as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Results range from 1:1 (identical colors) to 21:1 (pure black against pure white).

What counts as large text in WCAG 2.1?

WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (about 18.66px) bold weight. Large text requires a minimum ratio of 3.0:1 for AA and 4.5:1 for AAA.

What does UI Components AA (3.0:1) cover?

Under WCAG Success Criterion 1.4.11 (Non-text Contrast), interactive user interface components such as input borders, focus indicators, and standalone icons must maintain at least a 3.0:1 contrast ratio against adjacent colors.

How are nearest passing colors calculated?

The tool converts the foreground color to HSL and steps lightness up and down by 1% increments while preserving hue and saturation, returning the closest lightness value that meets each target threshold.