Color Contrast Checker (WCAG)

How to use this tool

1. Enter a foreground color. Type or paste a hex, RGB, or HSL color value into the Foreground field, or use the color picker.
2. Enter a background color. Type or paste a hex, RGB, or HSL color value into the Background field, use the color picker, or swap the two colors. Use the actual opaque background color for the comparison.
3. Read the contrast ratio. The ratio (e.g., 4.52:1) and WCAG pass/fail badges update instantly. If AA Normal fails, apply a same-hue lightness suggestion that reaches 4.5:1.
4. Preview text on background. Preview normal text and WCAG large text on the chosen background; large text is at least 18 pt regular or 14 pt bold.

How WCAG contrast ratio is calculated

The contrast ratio between two colors is defined by WCAG 2.x 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. Relative luminance is calculated by first converting each sRGB channel value (0–255) to a linear light value (using a gamma-correction curve), then weighting by the standard luminance coefficients:

L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin

These coefficients reflect how the human eye perceives brightness: we are much more sensitive to green than to blue. The +0.05 offset prevents a division-by-zero when comparing against pure black and ensures the ratio scales from 1:1 (identical colors) to 21:1 (black on white).

When AA Normal fails, the checker searches darker and lighter HSL values for either color, preserving that color's hue and saturation. Each suggestion reaches at least 4.5:1 while changing only one color; choose a suggestion to apply it. Alpha is ignored in rgba(), hsla(), and 8-digit hex values, so translucent colors are treated as fully opaque. For accurate results, enter the color after blending it against its actual opaque background.

What ratio do I need for AA / AAA?

WCAG 2.1 defines three conformance levels (A, AA, AAA) and two text sizes:

• AA Normal text: 4.5:1 minimum. Required for body copy, navigation links, and most UI text smaller than 18 pt regular or 14 pt bold.
• AA Large text: 3:1 minimum. Applies to text at 18 pt (24 px) regular or 14 pt (approximately 18.67 px) bold and above.
• AA UI components & graphical objects: 3:1 minimum. Applies to active interface components (input borders, focus rings, icon-only buttons) and meaningful parts of charts and diagrams.
• AAA Normal text: 7:1 minimum. The highest threshold; ideal for body copy read by users with significant low vision.
• AAA Large text: 4.5:1 minimum. The same as AA for normal text, but for large text.

Most design systems target AA at minimum. AAA is aspirational and may not be achievable for decorative text or logos, which are exempt from contrast requirements entirely.

WCAG 3.0 and APCA

The W3C is developing WCAG 3.0, which will replace the current contrast ratio formula with the Advanced Perceptual Contrast Algorithm (APCA). APCA is polarity-aware (light text on dark background is evaluated differently from dark text on light), uses a non-linear model that better matches human perception, and produces a different numeric scale (Lc values typically 0–106 rather than 1:1 to 21:1). WCAG 3.0 is not yet published as a final recommendation and is not currently required by law or standard procurement. Continue targeting WCAG 2.1 AA for current projects.

Common failing color combinations

Design tokens and automated testing

In a design system, design tokens (e.g., --color-text-primary, --color-bg-surface) define canonical color pairings. Automated contrast checks can be run at build time using tools such as axe-core, Storybook's accessibility addon, or Playwright with axe-playwright. Catching contrast failures during development is far less expensive than remediating them after production deployment.