🌗 Color Contrast Checker (WCAG)

What is the Contrast Checker?

Color contrast is the difference in perceived brightness between text and its background. The Web Content Accessibility Guidelines (WCAG) measure it as a ratio that ranges from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white). The higher the ratio, the easier the text is to read, especially for people with low vision or color vision deficiencies. Good contrast also helps everyone in bright sunlight, on cheap screens, or when glancing quickly.

The ratio is not a simple comparison of hex values. WCAG first converts each color to its relative luminance, a number that models how bright a human eye perceives it. Each red, green, and blue channel is scaled to a 0 to 1 range, linearized with a gamma curve, and then weighted (green counts most, blue least, because the eye is most sensitive to green). The contrast ratio is then (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color and L2 the darker one. The 0.05 term accounts for ambient screen glare.

WCAG sets two thresholds. Level AA, the common legal and practical baseline, requires 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter at 7:1 for normal and 4.5:1 for large text. Large text is defined as 18pt (about 24px) and larger, or 14pt (about 18.66px) bold and larger, since bigger glyphs stay legible at lower contrast. Logos and purely decorative text are exempt.

When to use it

• Checking whether your website body text meets WCAG AA before launch or an accessibility audit.
• Choosing a button text color that stays legible against a brand background color.
• Validating a design system palette so every text-on-surface pairing passes a known threshold.

How to use the Contrast Checker

1. Enter the foreground (text) color as a hex value, or use the color picker.
2. Enter the background color the same way.
3. Read the contrast ratio shown at the top of the results.
4. Check the AA and AAA pass or fail badges for normal and large text.
5. Use Swap colors to test the reverse pairing, and watch the live preview update.

Formula & method

Worked examples

WCAG contrast ratio requirements by level and text size

What counts as "large text" under WCAG

Common mistakes to avoid

• Comparing hex numbers instead of luminance. Contrast is not the numeric gap between hex codes. Two colors can have similar hex values but very different perceived brightness. Always use the luminance-based ratio, which is what this tool computes.
• Assuming all text needs 4.5:1. Large text only needs 3:1 for AA. Headings and big labels can use lower contrast than body copy, which gives more design freedom without failing the guideline.
• Forgetting hover, focus, and disabled states. A pairing that passes at rest can fail when a link turns a lighter shade on hover or when placeholder text is dimmed. Check every state, not just the default one.
• Ignoring contrast on icons and form borders. WCAG 1.4.11 requires 3:1 for meaningful non-text elements like icons, input outlines, and focus rings, not just text. A pretty but faint border can still be a failure.

Glossary

Contrast ratio

A number from 1:1 to 21:1 describing the luminance difference between two colors. Higher means more readable.

Relative luminance

A 0 to 1 value modeling how bright the human eye perceives a color, after gamma correction and channel weighting.

WCAG

Web Content Accessibility Guidelines, the international standard for making web content usable by people with disabilities.

Level AA

The mid tier of WCAG conformance, widely used as the legal and practical baseline for contrast.

Large text

Text at 18pt and up, or 14pt and up if bold. It qualifies for the lower 3:1 (AA) contrast threshold.

Frequently asked questions