G
GamutDesk

WCAG 2.1 Color Contrast Checker

Test color combinations against W3C WCAG 2.1 AA and AAA accessibility contrast standards with instant pass/fail ratings.

100% Client-SideZero Data Collection
Contrast Ratio
17.85:1
≥ 4.5:1
PASS
AA Normal Text
≥ 3.0:1
PASS
AA Large Text
≥ 7.0:1
PASS
AAA Normal Text
≥ 4.5:1
PASS
AAA Large Text
Live Typography & Interface Simulation

Large Headline (18pt+ bold / 24pt+)

This is normal body text (14-16px). Accessible design requires sufficient contrast against the background so readers with low visual acuity can consume content without fatigue.

Text hyperlink example

Technical Specification & Mathematical Principles

Relative luminance L is calculated from linearized sRGB coefficients: L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin.

The contrast ratio between two colors is computed as: (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter color and L2 is that of the darker color, yielding values from 1:1 up to 21:1.

Frequently Asked Questions

Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or under 14pt bold). Level AAA requires a stricter 7:1 ratio.

Related Design & Color Instruments

Color Blindness Simulator

Simulate Protanopia, Deuteranopia, Tritanopia, and Achromatopsia on colors and uploaded UI screenshots via 3x3 matrices.

Open Tool

APCA Contrast Calculator

Calculate readability contrast using WCAG 3.0 Accessible Perceptual Contrast Algorithm (APCA) Lc scores.

Open Tool

Text Contrast Checker

Evaluate legibility compliance specifically for body text (4.5:1 ratio) and large headings (3:1 ratio).

Open Tool

Image Color Picker

Extract pixel colors from your images with pixel-level precision and an interactive magnifying loupe. Runs 100% locally in your browser.

Open Tool