Color Contrast Checker - WCAG Ratio, AA/AAA & Live Preview

This Color Contrast Checker computes the WCAG 2.x contrast ratio between any foreground and background color. Enter HEX or RGB values, see a live text preview, and get instant AA/AAA pass or fail badges for normal and large text-plus a one-click copy of the ratio.

Color inputs

Sample heading text

The quick brown fox jumps over the lazy dog. Preview how body copy reads on your chosen background.

Large text preview

Contrast ratio

17.4:1

WCAG 2.x results

Normal text: below 18px regular or 14px bold. Large text: 18px+ or 14px+ bold.

WCAG AA - Normal text

Minimum ratio 4.5:1

Pass

WCAG AAA - Normal text

Minimum ratio 7:1

Pass

WCAG AA - Large text

Minimum ratio 3:1

Pass

WCAG AAA - Large text

Minimum ratio 4.5:1

Pass

Why contrast ratio matters for accessible design

Readable text depends on more than font choice-foreground and background colors must differ enough in perceived brightness for people with low vision, color-vision deficiency, or glare on mobile screens. The Web Content Accessibility Guidelines (WCAG) quantify that difference as a contrast ratio. A ratio of 4.5:1 is the AA baseline for normal body text; 7:1 is the AAA bar for the same text sizes. This checker applies the official sRGB luminance formula so you can validate palettes before they reach production CSS.

Designers often pick colors that look distinct to the naked eye yet fail mathematically-light gray on white is a common offender. Developers inherit those tokens in CSS custom properties and cannot easily spot failures without a dedicated tool. Enter foreground and background values as #RRGGBB hex or rgb(r, g, b) strings, preview sample heading and body copy on the live swatch, and read pass/fail badges for all four WCAG text thresholds in one glance.

WCAG AA vs AAA thresholds

WCAG distinguishes normal text from large text. Normal text is smaller than 18px regular weight (or 14px bold). Large text gets lower ratio requirements because bigger glyphs are inherently easier to parse. Use the table below as a quick reference when auditing components.

Level Normal text Large text
AA 4.5:1 3:1
AAA 7:1 4.5:1

Black (#000000) on white (#ffffff) yields the maximum 21:1 ratio and passes every tier. Mid-gray pairs such as #767676 on white sit near the AA boundary (~4.54:1). Use the copy-ratio button to paste results into design reviews or accessibility audit spreadsheets.

How relative luminance works

Human eyes are more sensitive to green light than red or blue, so WCAG weights channels differently when converting sRGB to linear luminance. Each 8-bit channel is normalized to 0-1, gamma-corrected, then combined: L = 0.2126 × R + 0.7152 × G + 0.0722 × B . The contrast ratio compares the lighter and darker luminance values: (Llight + 0.05) / (Ldark + 0.05) . That single number drives every pass/fail badge in the tool above.

Good pair example

#1a1a1a on #ffffff ≈ 16.1:1 - passes AA & AAA

Risky pair example

#cccccc on #ffffff ≈ 1.6:1 - fails all text tiers

Color Contrast FAQ

What is a WCAG contrast ratio?

A WCAG contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). Higher ratios mean text is easier to read against its background. WCAG 2.x uses this number to decide whether color pairs meet Level AA or AAA requirements for body copy, headings, and UI labels.

What contrast ratio do I need for WCAG AA?

For Level AA, normal text needs at least 4.5:1 and large text needs at least 3:1. Large text is defined as 18px regular (or 14px bold and larger). Non-text UI components and graphical objects have a separate 3:1 requirement against adjacent colors, but this checker focuses on readable text pairs.

What contrast ratio do I need for WCAG AAA?

For Level AAA, normal text needs at least 7:1 and large text needs at least 4.5:1. AAA is the stricter accessibility tier-many product teams target AA for general content and reserve AAA for critical instructions, legal disclaimers, or audiences with low vision.

How is contrast ratio calculated?

WCAG converts each sRGB channel to linear light, computes relative luminance with the formula 0.2126R + 0.7152G + 0.0722B, then divides the lighter value plus 0.05 by the darker value plus 0.05. The result is rounded to two decimal places. This tool implements the same math used by W3C reference algorithms.

Color contrast checker vs browser DevTools: which is faster?

Browser DevTools pick colors from rendered pixels and are excellent for debugging live pages. This standalone checker is faster when you are choosing brand palettes, reviewing design tokens, or validating HEX/RGB pairs before they ship-no inspect mode, no computed-style hunting, and instant AA/AAA badges for both normal and large text thresholds.

Does alpha transparency affect contrast?

Yes. Semi-transparent foreground colors are alpha-composited over the chosen background before luminance is calculated, matching how browsers blend rgba text onto solid surfaces. Fully opaque pairs use direct luminance comparison. For layered UI, always test the final blended color users actually see.

Sources & review

Last reviewed:

Related Dev Tools

Calculator hubs

Related guides