test foreground and background colors against WCAG 2.1 accessibility standards. see pass/fail for AA and AAA at a glance.
Presets
Large Text (24px Bold)
Large Text (18px Bold)
Normal body text at 16px. This is how your paragraph copy will look against this background color.
Small text at 12px — captions, footnotes, and fine print.
14.68:1
Excellent contrast — passes all WCAG levels
Pass
AA Normal
Requires 4.5:1
Pass
AA Large
Requires 3:1
Pass
AAA Normal
Requires 7:1
Pass
AAA Large
Requires 4.5:1
Normal Text
Body copy, paragraphs, and UI labels smaller than 18pt bold or 24pt regular.
Large Text
Headings and text at 18pt bold (24px) or 24pt regular (32px) and above.
Level AA
Minimum standard. Required by most accessibility laws and guidelines worldwide.
Level AAA
Enhanced standard. Recommended for maximum readability and inclusion.
Pick two colors — a foreground and a background — and the tool computes the WCAG 2 contrast ratio between them, plus which accessibility thresholds the pair passes or fails. A live preview shows what text actually looks like at the chosen colors.
These come from low-vision research that mapped how much contrast different visual conditions need at typical reading distances. They are blunt — a single number cannot capture every visual phenomenon — but they represent a real attempt at a population-level guideline.
A 1:1 ratio is two identical colors (invisible). A 21:1 ratio is pure black on pure white (the maximum). Most readable color combinations fall between 4 and 15. Below 3, text starts to require active effort to read; below 2, most people cannot read it without leaning into the screen.
The math involves linearizing each channel back from sRGB gamma encoding, weighting by perceived luminance (green contributes far more than blue), and dividing the resulting luminances. The full breakdown is in The math behind WCAG contrast checking — about ten minutes of reading if you want to know why certain color pairs feel different from what their numerical ratio suggests.
If your color pair fails the threshold you need, the lever with the highest leverage is lightness contrast, not hue or saturation.
Concretely: if dark blue text on white is failing, do not try to shift the blue toward another hue. Drop the lightness on the blue. Each 5% drop in HSL lightness typically buys you about 0.5 in the contrast ratio. A few clicks usually moves you from 3.8 to 4.5+.
The same applies in dark mode: light grey text on a dark background can be bumped past the threshold by raising the grey's lightness toward white. Hue changes are rarely the answer.
The pure-yellow-on-black trap
#ffff00) on pure black gives a contrast ratio of 19.5:1 — well above AAA. It also looks terrible to read for any sustained text. The math passes; the eye still suffers from chromatic aberration and the high saturation of pure yellow at sharp letter edges. Lower the saturation and lightness slightly, give up a couple of points of ratio, and the text becomes comfortable to read.This tool computes the WCAG 2 ratio because that is still the standard your work will be audited against in 2026. WCAG 3 is in working-draft status and introduces a different algorithm (APCA — Accessible Perceptual Contrast Algorithm) that handles more edge cases — polarity (light-on-dark vs dark-on-light), font weight, and font size all factor in.
Until WCAG 3 is finalized and adopted into legal accessibility frameworks (ADA, EN 301 549, Section 508), WCAG 2 is what auditors measure. Use APCA as a sanity check on color pairs that WCAG 2 flags as a problem but feel fine to the eye — but ship to WCAG 2.
For picking the colors you want to test, see the color picker. For building gradients that maintain contrast across their full range, see the CSS gradient generator.
Pick two colors — a foreground and a background — and the tool computes the WCAG 2 contrast ratio between them, plus which accessibility thresholds the pair passes or fails. A live preview shows what text actually looks like at the chosen colors.
These come from low-vision research that mapped how much contrast different visual conditions need at typical reading distances. They are blunt — a single number cannot capture every visual phenomenon — but they represent a real attempt at a population-level guideline.
A 1:1 ratio is two identical colors (invisible). A 21:1 ratio is pure black on pure white (the maximum). Most readable color combinations fall between 4 and 15. Below 3, text starts to require active effort to read; below 2, most people cannot read it without leaning into the screen.
The math involves linearizing each channel back from sRGB gamma encoding, weighting by perceived luminance (green contributes far more than blue), and dividing the resulting luminances. The full breakdown is in The math behind WCAG contrast checking — about ten minutes of reading if you want to know why certain color pairs feel different from what their numerical ratio suggests.
If your color pair fails the threshold you need, the lever with the highest leverage is lightness contrast, not hue or saturation.
Concretely: if dark blue text on white is failing, do not try to shift the blue toward another hue. Drop the lightness on the blue. Each 5% drop in HSL lightness typically buys you about 0.5 in the contrast ratio. A few clicks usually moves you from 3.8 to 4.5+.
The same applies in dark mode: light grey text on a dark background can be bumped past the threshold by raising the grey's lightness toward white. Hue changes are rarely the answer.
The pure-yellow-on-black trap
#ffff00) on pure black gives a contrast ratio of 19.5:1 — well above AAA. It also looks terrible to read for any sustained text. The math passes; the eye still suffers from chromatic aberration and the high saturation of pure yellow at sharp letter edges. Lower the saturation and lightness slightly, give up a couple of points of ratio, and the text becomes comfortable to read.This tool computes the WCAG 2 ratio because that is still the standard your work will be audited against in 2026. WCAG 3 is in working-draft status and introduces a different algorithm (APCA — Accessible Perceptual Contrast Algorithm) that handles more edge cases — polarity (light-on-dark vs dark-on-light), font weight, and font size all factor in.
Until WCAG 3 is finalized and adopted into legal accessibility frameworks (ADA, EN 301 549, Section 508), WCAG 2 is what auditors measure. Use APCA as a sanity check on color pairs that WCAG 2 flags as a problem but feel fine to the eye — but ship to WCAG 2.
For picking the colors you want to test, see the color picker. For building gradients that maintain contrast across their full range, see the CSS gradient generator.
PDF utilities, image tools, developer helpers — all free, no signup.
Add text or logo watermarks to photos with custom position, opacity, and tiling.
Live regex tester and debugger.
Convert text between UPPERCASE, lowercase, Title Case, camelCase, snake_case, kebab-case, and more.
Resize photos to exact dimensions with aspect ratio lock.
Compare two texts side by side with line-by-line diff highlighting.
Generate SEO meta tags, Open Graph, and Twitter Card HTML.