Color Contrast Checker for WCAG Ratios
Compare foreground and background colors and inspect their contrast ratio. Review the displayed AA and AAA results for the selected text size.
WCAG Color Contrast Checker workspace
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
Compare foreground and background colors and inspect their contrast ratio. Review the displayed AA and AAA results for the selected text size. A contrast result applies to the two colors being compared. Images, gradients, transparency, and interaction states can change the effective background. Passing this check is one part of accessibility review, not evidence that an entire page meets WCAG.
How to use the color contrast checker
- 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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Why does my brand color fail even though it looks readable?
Perceived brightness and measured luminance are different things. A mid-gray like #999999 on white looks fine but computes to only 2.85:1 — a failure at every WCAG level. Darken it to #767676 and it clears the 4.5:1 AA minimum for normal text.
What is the difference between AA and AAA thresholds?
AA demands 4.5:1 for normal text and 3:1 for large text (18pt+ regular or 14pt+ bold); AAA raises those to 7:1 and 4.5:1. Icons, form borders, and focus rings follow the separate 1.4.11 rule, which needs 3:1 at either level.
Can I paste RGB or HSL values instead of HEX?
The fields accept HEX in #rrggbb or shorthand #rgb form only. Convert RGB or HSL strings to HEX first with the Color Converter at /tools/color-converter, then test the result here against AA and AAA.
Are my color values uploaded while checking?
No. The relative-luminance math is processed locally in your browser, and Toolk's page analytics do not receive your HEX inputs. Invalid HEX is flagged rather than guessed, so you never get a silent wrong ratio.
Does this checker use APCA like some newer tools?
No — it grades against WCAG 2.2, the standard that is legally enforceable today. APCA belongs to the draft WCAG 3.0 and reports an Lc value instead of a ratio; this page explains both but scores with the 2.2 formula so results match auditors and Lighthouse.