WCAG Contrast Checker — AA & AAA Colour Contrast Ratio

More Color Tools Tools

Color Converter

Bidirectional color converter — HEX, RGB, HSL, HSV, CMYK, plus a native color picker, all updating live as you type.

Color Mixer

Mix two colours with a ratio slider — see the result in HEX, RGB, and HSL, and preview both original colours alongside the blended output.

T&

Tint & Shade Generator

Generate 10 tints and 10 shades from any base colour — 21 swatches with hex codes, one click to copy.

RC

Random Color Generator

Generate truly random colours with channel locking and a 5-colour history — copy the hex code with one click.

PG

Palette Generator

Generate harmonious colour palettes from a base colour — Complementary, Analogous, Triadic, Tetradic, and Monochromatic.

CN

Color Name Finder

Find the closest CSS named colour for any hex code — top 5 matches ranked by RGB distance.

CT

CMYK to Pantone

Find the closest Pantone colour for any CMYK mix — top 3 matches with official-looking names and swatches.

MC

Material Color Generator

Generate a full Material Design colour palette — 50 through 900 shades plus A100-A700 accent colours from any primary hex.

GG

Gradient Generator

Build live CSS gradients — Linear, Radial, and Conic — with multiple colour stops, angle control, and copyable CSS output.

IC

Image Color Picker

Pick any pixel colour from an uploaded image — zoom lens, live HEX/RGB/HSL, lock colour on click.

How to Use Contrast Checker

Set a foreground colour and a background colour — each with a hex text input and a native colour picker — and see the contrast ratio calculated live. The result is displayed with pass/fail indicators for WCAG AA normal text (minimum 4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). A sample-text preview shows you exactly how the colours look together, using the word "Preview" set in your chosen foreground and background.

About Contrast Checker

WCAG (Web Content Accessibility Guidelines) 2.1 defines contrast ratios as the primary metric for text legibility. The ratio is computed from the relative luminance of the two colours, using a formula that accounts for the human visual system's non-linear perception of brightness. Simply comparing two hex values by eye is surprisingly unreliable — two colours that look "clearly different" in isolation often produce a ratio below the AA threshold when their luminance values happen to be similar, especially in greys and pastels. The contrast ratio is the number before the colon in the familiar `4.54:1` notation. It ranges from 1:1 (identical colours) to 21:1 (pure white on pure black). The WCAG 2.1 success criteria set four thresholds that this tool checks against: - **AA normal text** (body copy smaller than 18pt, or 14pt bold): ratio must be ≥ 4.5:1. - **AA large text** (18pt or larger, or 14pt bold or larger): ratio must be ≥ 3:1. - **AAA normal text**: ratio must be ≥ 7:1. - **AAA large text**: ratio must be ≥ 4.5:1. AAA is the enhanced, optional level — most projects aim for AA across all text, with AAA for body copy being a stretch goal. The tool marks each threshold with a green check or a red cross so you can see at a glance which levels your colour pair satisfies. The calculation follows the WCAG 2.1 relative luminance definition precisely: each 8-bit sRGB channel (0-255) is first linearised by dividing by 255 and then applying the piecewise function — values at or below 0.03928 are divided by 12.92 (the linear section), while values above are raised to the power of 2.4 with the 0.055 offset added. The three linearised channels are then combined using the standard luminance weights (0.2126 for red, 0.7152 for green, 0.0722 for blue), which reflect the human eye's differing sensitivity to each colour. The final contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance.

Details & Tips

The algorithm step by step: 1. For each of the two colours, extract the red, green, and blue channels as numbers 0-255 from the 6-digit hex code. 2. Normalise each channel to a 0-1 fraction: channel / 255. 3. Linearise each channel using the sRGB piecewise gamma function: - If norm ≤ 0.03928: linear = norm / 12.92 - Else: linear = ((norm + 0.055) / 1.055) ^ 2.4 4. Compute relative luminance: L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear. 5. Identify which of the two luminances is lighter (larger). 6. Contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05). 7. Display the ratio formatted to two decimal places with ":1" appended. The 0.05 offset in step 6 ensures that the ratio is always defined (no division by zero for pure black) and that the minimum ratio is 1.0 rather than approaching infinity. It is part of the WCAG specification, not an arbitrary smoothing factor. **Alpha transparency note:** The WCAG formula assumes fully opaque colours. If a CSS colour with an alpha channel (e.g. `rgba(0,0,0,0.5)`) is pasted, the tool flattens it against a white background before computing luminance — this is noted in the UI with a warning so you are not misled. The flattening uses the formula channel_blended = channel_fg × alpha + 255 × (1 - alpha), since white is RGB(255,255,255). Flattening against white is the most conservative choice (and what the WCAG recommends for unknown backgrounds) because it generally produces the lowest contrast ratio of any possible background assumption. **Large text definition:** WCAG defines "large" as at least 18 point, or at least 14 point when bold. The tool does not know your actual font size or weight, so it marks both the AA and AAA large-text thresholds independently — you are responsible for matching the threshold to the actual text you intend to use. **Non-text contrast:** WCAG 2.1 also requires a 3:1 minimum for UI components and graphical objects (SC 1.4.11). This tool does not explicitly flag that threshold separately, but any pair that passes AA large text also passes the non-text-contrast minimum, so the AA large-text check serves double duty here. **Rounding:** The displayed ratio rounds to two decimal places for readability. The underlying pass/fail decision is made on the full-precision ratio, not the rounded display value, so a ratio of 4.495:1 (which rounds to 4.50 but is below 4.5) correctly shows as a fail, while 4.505:1 rounds to 4.51 and passes.

Frequently Asked Questions

What is a contrast ratio?

It is a number that describes how different two colours appear in brightness, ranging from 1:1 (identical) to 21:1 (black on white). Higher numbers mean more legible text.

How is the contrast ratio calculated?

Each colour's RGB channels are first linearised using the sRGB gamma function, then combined into relative luminance using the weights 0.2126 (R), 0.7152 (G), and 0.0722 (B). The ratio is (L_lighter + 0.05) / (L_darker + 0.05).

What do AA and AAA mean?

AA and AAA are WCAG 2.1 conformance levels. AA is the minimum recommended level for web content accessibility. AAA is the enhanced level, which is harder to achieve and optional for most projects.

What contrast ratio do I need for AA normal text?

At least 4.5:1. This applies to body copy smaller than 18pt, or smaller than 14pt if bold.

What contrast ratio do I need for AA large text?

At least 3:1. WCAG defines large text as 18pt or larger, or 14pt bold or larger.

What does the visual preview show?

The word "Preview" rendered with your chosen foreground colour on your chosen background colour, so you can judge the legibility directly rather than relying only on the number.

What happens if I use a colour with transparency?

The tool flattens the colour against a white background (255,255,255) before computing luminance and shows a note warning you that transparency was assumed. This is the conservative approach recommended by WCAG.

Why is the green channel weighted more heavily than blue?

The human eye is most sensitive to green light and least sensitive to blue. The luminance weights (0.2126, 0.7152, 0.0722) come from the ITU-R BT.709 standard and reflect measured human visual sensitivity.

Is this tool compliant with WCAG 2.1?

The calculation follows the WCAG 2.1 relative luminance definition exactly. The pass/fail thresholds match the specification. Always use this as a check, not a guarantee — real-world legibility also depends on font weight, anti-aliasing, and screen calibration.

What is the highest possible contrast ratio?

21:1, achieved with pure white (#FFFFFF) on pure black (#000000) or vice versa. The minimum is 1:1 for identical colours.

Can I type hex codes with or without the hash symbol?

Both work — the tool strips a leading # if present and only validates the 6 hex digits. The field auto-prepends # in the display for consistency.

Is my data sent to a server?

No — all calculations happen locally in your browser. Nothing you type is transmitted anywhere.

Part of These Collections

Design & Media Studio

Also Available As

contrast checker, wcag contrast checker, color contrast checker, accessibility color checker, aa contrast, aaa contrast, contrast ratio calculator, web accessibility color