Color Contrast Checker
Check WCAG color contrast ratio for any foreground and background. Get AA/AAA pass-fail for body text, large text, and UI components, plus a one-click suggestion to fix failing contrast.
- Runs in your browser
- Your data never leaves your browser
- Free · No Sign-Up
Scan with WeChat to share this tool
Examples, details and FAQ Worked examples, how it compares with other tools, and answers to common questions.
WCAG Contrast Ratio Explained
The WCAG 2.x contrast ratio is computed from the relative luminance of two colors. Each sRGB channel is gamma-decoded with the piecewise transfer curve, weighted by 0.2126·R + 0.7152·G + 0.0722·B, and the ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two luminances. The result lies between 1 (no contrast) and 21 (pure black on pure white).
Body, Large, UI — Three Tiers
WCAG 2 splits contrast targets by use case:
- Body text (Success Criterion 1.4.3) — at least
4.5 : 1for AA and7 : 1for AAA. Counts text below 18 px regular or below 14 px bold. - Large text — at least
3 : 1for AA and4.5 : 1for AAA. Counts text 18.66 px bold or larger, or 24 px regular and larger. - UI components and graphical objects (Success Criterion 1.4.11) — at least
3 : 1. Covers borders, focus indicators, icons, chart strokes, and similar non-text visual elements. WCAG 2 does not specify an AAA target here.
Why “Keep Hue, Adjust Lightness”
Brand colors and design tokens are usually picked for hue identity, not luminance. When contrast fails, blindly switching to black or white can break the visual language. This tool walks the foreground along its OKLCH lightness axis (perceptually uniform), keeps the original hue and chroma, and stops at the first lightness that satisfies 4.5 : 1 against the current background. Every candidate is rounded to an 8-bit HEX before its ratio is checked, so the HEX you copy passes on its own. The result is the color closest to your original that still passes body AA. If your hue cannot reach the target within the sRGB gamut, the tool falls back to flat black or white.
Privacy
Every calculation — hex parsing, OKLCH conversion, contrast ratio, suggestion search — runs locally in your browser. No color, no preference, no analytics about your input is uploaded.
Related Tools
- Color Palette Generator — build complementary, analogous, triadic, and tetradic palettes from any base color.
- Color Converter — convert between HEX, RGB, and HSL.
- Color Shades Generator — produce Tailwind-style 50–950 scales with the contrast of each step.
FAQ
Which WCAG version does this tool follow?
WCAG 2.1 / 2.2 contrast ratio formula based on relative luminance. The thresholds are 4.5:1 for body text AA, 7:1 for AAA, 3:1 for large text AA, 4.5:1 for large text AAA, and 3:1 for UI components and graphical objects (Success Criterion 1.4.11).
What input formats are accepted?
Six-digit hex with or without leading hash (e.g. #1f2937 or 1f2937). The native color picker is also available next to each input. Three-digit shorthand like #abc is auto-expanded to six digits.
How is the suggested fix calculated?
When body text AA (4.5:1) fails, the tool keeps the foreground hue and chroma in OKLCH and binary-searches for the nearest lightness value that meets 4.5:1 against the current background. Each candidate is rounded to the 8-bit HEX that is shown and copied, and the ratio is measured on that HEX, so the suggestion passes as written (for #D97706 on #FFF7ED it is #B75700 at 4.51:1). If the foreground hue cannot reach 4.5:1 within the sRGB gamut, the tool falls back to flat black or white — whichever passes.
Does this tool send my colors anywhere?
No. All calculation runs in your browser. Inputs and results are never uploaded.
What about APCA, the proposed WCAG 3 method?
This tool reports the WCAG 2.x ratio, which is the legally referenced standard today. APCA is still draft. For APCA-specific work use the official Myndex tools.