Color Contrast Checker — WCAG AA & AAA Compliance
Verify that your text and background colors meet WCAG 2.1 accessibility standards. Check AA and AAA compliance for both normal and large text with a live preview.
Excellent Contrast
WCAG 2.1 Contrast Ratio
AA — Normal Text
≥ 4.5:1
AA — Large Text
≥ 3:1
AAA — Normal Text
≥ 7:1
AAA — Large Text
≥ 4.5:1
Preview
NORMAL TEXT (16px)
The quick brown fox jumps over the lazy dog
LARGE TEXT (24px)
The quick brown fox jumps over the lazy dog
SMALL TEXT (12px)
The quick brown fox jumps over the lazy dog
WCAG 2.1 contrast requirements
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with low vision or color blindness.
| Level | Text type | Minimum ratio |
|---|---|---|
| AA | Normal text (under 18pt / 14pt bold) | 4.5:1 |
| AA | Large text (18pt+ / 14pt+ bold) | 3:1 |
| AAA | Normal text | 7:1 |
| AAA | Large text | 4.5:1 |
Contrast ratio scale
- 1:1 — No contrast (same color)
- 3:1 — Minimum for large text (AA)
- 4.5:1 — Minimum for normal text (AA)
- 7:1 — Enhanced contrast for normal text (AAA)
- 21:1 — Maximum contrast (black on white)
Why it matters
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. Sufficient contrast benefits everyone — in bright sunlight, on low-quality screens, or when fatigued.
Related Tools
Color Mixer & Gradient Generator
Blend two colors together with a ratio slider. Get a full gradient palette.
CSS Color Names — All 148 Named Colors
Browse all 148 CSS named colors with their HEX and RGB values.
Material Design Color Chart & Palette
Material Design color palette — 19 hue families × 10 shades each.
Minecraft Color Codes & Formatting
All Minecraft §-prefixed color and formatting codes with previews.
Roblox Color Codes & BrickColor IDs
Complete Roblox BrickColor palette with color IDs and RGB values.
Color Palette Generator
Generate harmonious color palettes from a base color using complementary, triadic, and analogous schemes.
Color Format Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK, and CSS named color formats instantly.
Color Shades Generator
Generate a 10-step shade palette (50–900) from any base color using HSL lightness scaling — just like Tailwind CSS.
Color Gradient Palette Generator
Generate smooth RGB gradients between two colors with 3–20 steps. Copy HEX swatches, CSS linear-gradient, or a Tailwind array.
Color Contrast Analyzer
Check WCAG 2.1 contrast ratios for any color pair. Pass/fail for AA and AAA levels — plus automatic suggestions and live text preview.
Color Blindness Simulator
Upload any image to see how it appears with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
Online Color Picker — HEX, RGB & HSL
Pick any color visually with a canvas-based HSV picker. Export as HEX, RGB, or HSL.
Color Wheel Online — Interactive HSL Color Picker
Interactive HSL color wheel. Click any point to pick its hue and saturation.
Image Color Picker — Sample Colors from Photos
Upload any image and click to sample colors directly from pixels.
HEX to RGB Color Converter
Convert HEX color codes to RGB, HSL, HSV, and CMYK values instantly.
RGB to HEX Color Converter
Set R, G, B values with sliders or inputs and get the HEX, HSL output.