Color Contrast Checker
WCAG AA and AAA contrast checking with fix suggestions — for accessible interfaces.
Colors
Computed locallyLive preview
Large heading text (24px bold)
Normal body text at 16px. The quick brown fox jumps over the lazy dog — can every reader make this out?
Small print at 12px, where contrast failures hurt the most.
Excellent — passes AAA for normal text. Comfortable for body copy at any size.
How the thresholds work
| 3:1 | Large text (24px+, or 18.7px+ bold), icons, input borders, focus rings |
| 4.5:1 | AA for normal text — the legal/compliance baseline in most jurisdictions |
| 7:1 | AAA for normal text — covers ~20/80 vision without assistive tech |
How it works
Contrast is the most measurable accessibility property and the most commonly failed one. WCAG reduces the question "can people read this?" to arithmetic: compute each color's relative luminance — a perceptually weighted brightness where green counts roughly ten times more than blue — and take the ratio between the lighter and darker values. This checker runs that exact formula on any foreground/background pair, prefilled with a light-on-dark pairing so a real ratio is on screen the moment the page loads.
The pass/fail badges cover the five thresholds that matter in practice. AA normal text requires 4.5:1 and is the compliance baseline referenced by the ADA case law, the European Accessibility Act and Section 508. Large text — 24px regular or 18.7px bold and up — passes AA at 3:1 because thicker strokes survive lower contrast. AAA raises those bars to 7:1 and 4.5:1 for readers with moderately low vision. And the frequently forgotten non-text rule applies 3:1 to UI components: input borders, focus rings, icons and chart elements that convey information.
Numbers alone breed false confidence, so the live preview renders your actual pair at three sizes — a bold heading, 16px body copy, and the 12px small print where contrast failures bite hardest. Judging readability by eye is unreliable (designers systematically overestimate their own contrast), but seeing the rendered pair alongside the computed ratio builds the calibration that makes future choices faster. The swap button flips foreground and background instantly, useful for checking dark-mode inversions of an existing palette.
When a pair fails, the checker does not just shame you — it proposes the nearest passing color. The suggestion algorithm nudges the text color's lightness toward the pole opposite the background in two-percent steps and stops at the first value clearing AA 4.5:1, preserving the hue so brand identity survives the fix. Everything computes locally in your browser with zero network calls, and arbitrary picked colors are rendered via inline styles so the tool itself stays within its own design system.
Frequently asked questions
How is the contrast ratio actually calculated?
WCAG defines relative luminance for each color: sRGB channels are linearized (values below 0.04045 divide by 12.92, the rest go through a 2.4 power curve), then weighted 0.2126 red + 0.7152 green + 0.0722 blue to match human brightness perception. The ratio is (lighter + 0.05) / (darker + 0.05), ranging from 1:1 for identical colors to 21:1 for pure black on white. This tool implements that formula exactly — the same math axe, Lighthouse and browser devtools use.
What counts as large text for the 3:1 threshold?
WCAG defines large text as at least 18 point (24 CSS pixels) regular weight, or 14 point (about 18.7 CSS pixels) bold. Larger glyphs have thicker strokes and more distinguishable shapes, so they remain legible at lower contrast — hence the relaxed 3:1 requirement at AA. Note the cutoff is exact: 23px regular text is normal text and needs 4.5:1, which catches many heading scales that hover just under the threshold.
Do I need AA or AAA compliance?
AA (4.5:1 normal, 3:1 large) is the standard cited by nearly every legal and procurement requirement — ADA settlements, the European Accessibility Act, Section 508 and most government contracts reference WCAG 2.x AA. AAA (7:1 normal) is a stretch target appropriate for body text in reading-heavy products and for audiences skewing older, but WCAG itself acknowledges AAA is not achievable for all content. Practical guidance: AA everywhere as a floor, AAA for long-form body copy where you can.
Why do UI components and icons have their own 3:1 rule?
WCAG 1.4.11 (non-text contrast) extends the 3:1 requirement beyond text to the visual information needed to identify interface components and their states: input borders, focus indicators, checkbox marks, icons that convey meaning, and parts of charts. A form field whose border sits at 1.5:1 against the page background is functionally invisible to many low-vision users even when its label text passes. This checker includes that badge because it is the most commonly missed criterion in audits.
How does the suggested fix work?
When a pair fails AA for normal text, the tool walks the text color's lightness toward white (on dark backgrounds) or black (on light ones) in small steps, keeping the hue family intact, and stops at the first candidate reaching 4.5:1. The result is the minimal perceptual change that achieves compliance — usually close enough to the original that the design intent survives. It adjusts the text color only; sometimes adjusting the background instead is the better design call.
Built by FORG — AI cost observability for agentic coding. Free tools, no signup, nothing leaves your browser.
Learn about FORG