WCAG Contrast Checker
Check foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.
Sample headline
The quick brown fox jumps over the lazy dog
14.63:1
AA normal
✓ Pass
AAA normal
✓ Pass
AA large
✓ Pass
AAA large
✓ Pass
AA UI
✓ Pass
How to use the wcag contrast checker
Pick or paste foreground and background colors. The contrast ratio is computed and graded against WCAG 2.1 AA/AAA for normal text, large text, and UI components.
Formula & explanation
WCAG ratio = (L1 + 0.05) / (L2 + 0.05) where L is relative luminance using the sRGB formula. Thresholds: AA = 4.5 (normal text) / 3 (large/UI). AAA = 7 / 4.5.
Examples
#1e293b on #ffffff → 14.6:1 (passes AAA on everything). #999 on #fff → 2.85:1 (fails most standards).
Frequently asked questions
- What counts as large text?
- 18pt+ regular or 14pt+ bold (≈ 24px / 19px in CSS).
Related design & css tools
- Aspect Ratio CalculatorCalculate width or height to preserve any aspect ratio — 16:9 widescreen, 4:3, 1:1, or custom. Great for responsive images, video embeds, and UI layouts.
- Image Color PaletteExtract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.
- PX ↔ REM ConverterConvert between pixels and rems for any base font size (default 16px). Paste a list of values to convert all at once — useful for responsive CSS and design token work.
- CSS Gradient GeneratorBuild linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.
- Box Shadow GeneratorCompose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.
- Border Radius GeneratorBuild CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.