QKitBoxColor contrast checker (WCAG)
Pick a text color and a background color — see the exact contrast ratio and whether it passes WCAG AA and AAA for normal and large text.
Normal text sample — the quick brown fox jumps over the lazy dog.
Small text sample — 13px, the size most fine print uses.
Large text sample — 24px bold.
WCAG 2.1 thresholds: AA needs 4.5:1 for normal text and 3:1 for large text (18pt/24px, or 14pt/18.5px bold); AAA needs 7:1 and 4.5:1. UI components and graphical objects need 3:1 (WCAG 1.4.11).
How it works
Contrast is computed from relative luminance: each channel is linearized (values above 0.03928 in sRGB get a gamma-adjusted curve), weighted 0.2126 R + 0.7152 G + 0.0722 B, and the ratio is (lighter + 0.05) ÷ (darker + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (black on white). This is the exact WCAG 2.1 formula, computed live as you pick colors.
Frequently asked questions
What ratio should I aim for?
AA (4.5:1 normal, 3:1 large) is the legal baseline in most accessibility regulations; AAA (7:1) is the stretch goal. Body text benefits from AAA even when AA passes.
Does this apply to logos and images?
The text rules apply to text. Logos and decorative elements are exempt, but meaningful icons and charts have their own 3:1 requirement (WCAG 1.4.11).
Written and maintained by Steven Huang · Last reviewed October 29, 2026.