Color Contrast Checker — WCAG 2.2 AA & AAA
Enter a foreground and background HEX, get the exact contrast ratio and an instant pass/fail verdict against WCAG 2.2 AA (4.5:1) and AAA (7:1). Free and 100% in your browser.
Contrast Ratio
15.43:1
AA Normal Text
≥ 4.5 · 14pt regular or smaller
AA Large Text
≥ 3.0 · 18pt regular or 14pt bold+
AAA Normal Text
≥ 7.0 · Highest accessibility level
AAA Large Text
≥ 4.5 · Highest accessibility level
UI Components & Graphics
≥ 3.0 · WCAG 1.4.11 (icons, borders, focus)
Live Preview
Large heading sample
Subheading sample text
Regular paragraph text. This is what 16px body copy looks like with the selected foreground on the selected background.
Small caption text — 14px regular.
Quick Presets
WCAG 2.2 Compliance
Check both AA (≥4.5:1) and AAA (≥7.0:1) thresholds for normal and large text, plus the 3:1 rule for UI components and graphical objects.
Live Side-By-Side Preview
See exactly how your color pair renders on real headings, paragraphs, captions, and buttons before shipping it to production.
Native HEX + Picker
Type a HEX value directly, paste from your design tokens, or use the native color picker. Short HEX (#abc) is auto-expanded.
100% Client-Side
No upload, no API call. The contrast formula runs entirely in your browser — your color tokens never leave your machine.
Color Contrast Checker: Test WCAG 2.2 AA and AAA Ratios
A color contrast checker measures the contrast ratio between a foreground (text) color and a background color, then grades it against WCAG. Enter two HEX values and this tool returns the exact ratio — from 1:1 to 21:1 — plus pass/fail verdicts for AA (4.5:1), AAA (7:1), and the 3:1 UI-component rule. It runs 100% in your browser, free.
How to check color contrast
- Type a Foreground HEX (the text color) or pick it with the native color picker. Short HEX like
#abcauto-expands to#aabbcc. - Set the Background HEX the same way — the contrast ratio recomputes the instant either value changes.
- Read the big ratio and the five verdict rows: AA Normal, AA Large, AAA Normal, AAA Large, and UI Components (1.4.11).
- Check the live preview to see real headings, body copy, captions, and a button rendered in your pair.
- Use Swap Colors to test the reverse pairing, or click a preset to load a known-good or known-failing example.
How the contrast ratio is calculated
Contrast ratio is not a simple brightness difference. It uses relative luminance — a perceptually weighted measure of how light each color appears. This tool converts each HEX to RGB, applies the sRGB gamma curve, then weights the channels by the human eye's sensitivity: 0.2126 R + 0.7152 G + 0.0722 B. Green dominates because we perceive it as far brighter than red or blue at the same value.
The final ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 the darker. The + 0.05 models ambient screen flare, which is why pure black on pure white tops out at exactly 21:1 and identical colors give 1:1. The exact wording lives in the W3C WCAG 2.2 Contrast (Minimum) spec, with the channel formula defined by MDN's color-contrast reference.
"For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 × R + 0.7152 × G + 0.0722 × B."— W3C, Understanding WCAG 2.2 Success Criterion 1.4.3
Worked examples: HEX pair → verdict
Passes AAA · #000000 on #FFFFFF
21.00:1 — the maximum possible ratio. Clears AA, AAA, and 1.4.11 for every text size.
Passes AA · #555E66 on #FFFFFF
6.61:1 — clears AA Normal (4.5:1) but falls short of AAA Normal (7:1).
Edge: large text only · #007BFF on #FFFFFF
3.98:1 — passes AA Large (3:1) and 1.4.11, but FAILS AA Normal. Safe for headings, not body text.
Fails everything · #999999 on #FFFFFF
A mid-gray that looks readable computes to just 2.85:1 — below even the 3:1 floor. It fails AA, AAA, and UI Components. Darken to #767676 (4.54:1) to pass AA Normal.
WCAG 2.2 contrast threshold reference
These are the exact thresholds this tool grades against. Large text means 18pt (24px) regular or 14pt (18.66px) bold and above. The 1.4.11 row covers non-text contrast for icons, form borders, and focus rings.
| Requirement | AA | AAA | Applies to |
|---|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 | Body copy under ~18pt / 24px |
| Large text | 3 : 1 | 4.5 : 1 | 18pt+ regular or 14pt+ bold |
| UI & graphics (1.4.11) | 3 : 1 | 3 : 1 | Icons, borders, focus rings, chart lines |
The 0.03928 vs 0.04045 quirk most checkers ignore
The gamma branch in this tool switches linear-to-curve at c ≤ 0.03928 — the value from WCAG's original definition. In May 2021 the W3C updated that breakpoint to 0.04045 to match the sRGB standard, but per the spec it "has no practical effect on the calculations." The two thresholds differ only in the seventh decimal of luminance and never flip a pass/fail verdict, so a ratio you read here will match Chrome DevTools and Lighthouse to two decimals.
One real limit worth knowing: WCAG 2.x overstates contrast for near-black colors, so a technically-passing 4.5:1 pair can read as low-contrast in dark mode. The draft WCAG 3.0 proposes the perceptual APCA method, which reports a lightness-contrast (Lc) value from roughly Lc 0 to Lc 105 (Lc 90 preferred for body text) instead of a ratio. AA and AAA remain the legal standard today, so this tool grades against 2.2.
Runs 100% in your browser
Your color values never leave your device. The relative-luminance and ratio math run locally in JavaScript — no uploads, no API calls. I verified the output against the six built-in presets and spot-checked pairs in Chrome DevTools' contrast inspector: #000000 on white reports 21:1, #999999 on white reports 2.85:1, and short HEX such as #fff expands correctly before the math runs. Invalid HEX is flagged with a red border and yields no ratio rather than a wrong one.
Frequently asked questions
Is this color contrast checker free?
Yes — 100% free, no signup, and no usage cap. Test as many foreground and background HEX pairs as you need against WCAG 2.2 AA and AAA.
Does my color data get uploaded?
No. The contrast math runs entirely in your browser, so HEX values and previews never leave your device. The tool keeps working offline once the page has loaded.
Why does my brand color fail even though it looks readable?
Perceived brightness and measured luminance differ. A mid-gray like #999999 on white looks fine but computes to only 2.85:1 — a failure at every level. Darken it to #767676 to clear the 4.5:1 AA minimum.
Can I enter RGB or HSL instead of HEX?
The field accepts HEX in full #rrggbb or shorthand #rgb form. For RGB or HSL strings, convert them to HEX first with the Color Converter, then paste the result here.
Related color & design tools
Convert a failing HEX to RGB or HSL to nudge lightness
Color PickerSample any HEX value to test for contrast
Color MixerBlend two colors and re-check the mix
Color Palette GeneratorBuild an accessible scale from a base color
CSS Gradient GeneratorBuild gradients, then check text over each stop
CSS Filter GeneratorTune brightness and contrast filters visually
Glassmorphism GeneratorFrosted-glass cards — verify text contrast on blur
Border Radius GeneratorRound corners for buttons and cards
AltCatchAudit alt text & broken images (WCAG 2.2)
Guide: HEX, RGB, HSL & OKLCHHow color models map to contrast and luminance
All ToolsBrowse every free Toolk utility
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.