Skip to content
TechnologyTools

Colors

WCAG Color Contrast Checker

Test foreground/background color pairs against WCAG 2.1 AA and AAA contrast requirements with a live text preview.

Large heading preview

This is normal body text rendered with your exact color pair. Judge readability here, not just the numbers.

Contrast ratio
17.85:1
AA · normal text✓ Pass
AA · large text✓ Pass
AAA · normal text✓ Pass
AAA · large text✓ Pass

Ratios use the exact WCAG 2.1 relative-luminance formula. AA: 4.5:1 normal / 3:1 large. AAA: 7:1 / 4.5:1.

Reading the WCAG Ratios

The result compares the relative luminance of your two colors and expresses it as a ratio against 1:1. The thresholds are 4.5:1 for normal body text (WCAG AA), 3:1 for large text of 18.66px bold or 24px regular, and 3:1 for UI components such as input borders and focus indicators (WCAG 1.4.11).

A failing ratio is not a matter of taste — it is the difference between text a low-vision user can read in sunlight and text they cannot. When a brand color fails against white, the usual fixes in order of least pain: darken the text variant of the color, use it only for large headings, or reserve it for non-text decoration.

How the Color Math Works

  1. Pick or paste a text color and a background color.
  2. The contrast ratio is computed with the exact WCAG relative-luminance formula.
  3. Pass/fail is shown for all four checkpoints: AA/AAA × normal/large text.
  4. The live preview renders your actual text on the background so you can judge readability, not just numbers.
Formula & Technical Standard
Ratio = (L1 + 0.05)/(L2 + 0.05), where L is relative luminance per WCAG 2.1 (linearized sRGB channels).

Worked Example

Button label check
Input: #FFFFFF on #0284c7
Output: 4.10:1 — AA fail (normal text), AA pass (large text only)
AA requires 4.5:1 for normal text, so this pairing fails for body copy even though it passes for large text. Switching the text to black (5.13:1) would pass AA for normal text.
Large heading
Input: #767676 on #FFFFFF
Output: 4.54:1 — AA pass (normal text)
At 4.54:1 this pairing clears the 4.5:1 AA threshold for body copy (large text needs only 3:1).

Common Questions

What ratio do I actually need?

AA: 4.5:1 for normal text, 3:1 for large text (≥ 18pt or 14pt bold). AAA raises these to 7:1 and 4.5:1.

Does contrast affect SEO?

Accessibility is a quality signal, and low-contrast text is specifically called out in Google’s page-experience guidance.

Developer Toolspopular

Color Converter

Inspect and convert colors across all major web and print formats (HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK) in real time with interactive preview.

Colorspopular

Color Palette Generator

Turn one base color into a full design-ready palette: tints, shades, and harmonic variations, each with HEX/RGB/HSL values.

Colorspopular

CSS Gradient Generator

Design linear and radial CSS gradients with multiple stops and full angle control — previewed live, exported as clean CSS.