Contrast Checker
Pick two colors from any image and check the WCAG contrast ratio. See whether your color combination passes AA and AAA accessibility standards for normal and large text.
400+ contrasts checked
Drag & drop a file here, Ctrl+V to paste, oror
WCAG AA & AAA
Checks against all four WCAG 2.1 contrast requirements: AA normal (4.5:1), AA large (3:1), AAA normal (7:1), and AAA large (4.5:1).
Pick from Image
Use the eyedropper with zoom loupe to pick exact colors from your design screenshot. Or type HEX values manually.
100% Private
Contrast calculation and color picking happen entirely in your browser via the Canvas API. No server upload, no storage, no tracking.
What is WCAG contrast ratio?
The contrast ratio is a number between 1:1 (no contrast, identical colors) and 21:1 (maximum contrast, black on white). WCAG 2.1 defines minimum ratios for text readability: AA level requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular); AAA level requires 7:1 for normal text and 4.5:1 for large text. The ratio is calculated from the relative luminance of each color using the formula defined in the WCAG specification. To check how your colors appear to color-blind users, run the same image through the Color Blindness Simulator.
Picking colors from your design
Upload a screenshot of your website, app, or design mockup. Click to pick the foreground (text) color first, then click again to pick the background color. The zoom loupe shows individual pixels at 8× magnification so you can target the exact color. You can also type HEX values directly if you already know your colors. The swap button reverses foreground and background to check the inverse combination. For extracting a full color palette from an image, use the Color Picker or the Color Palette Extractor.
Why accessibility contrast matters
Low-contrast text is hard to read for everyone — not just people with visual impairments. Bright sunlight on a phone screen, aging eyes, and color vision deficiencies all reduce effective contrast. WCAG guidelines exist because accessible design serves more users. Many jurisdictions require WCAG compliance by law for government and public-facing websites. Testing your design's contrast before launch takes seconds and prevents readability issues. To adjust contrast levels in your images, use the Image Filters tool.
How the ratio is calculated
Each color's relative luminance is computed by converting sRGB values to linear light (applying gamma correction), then weighting by the human eye's sensitivity to red, green, and blue. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. This matches the exact WCAG 2.1 specification. The live preview shows your text/background combination at actual size so you can judge readability visually alongside the numeric result. For a full tonal breakdown of your image, try the Histogram Analyzer. Explore all 88 image tools. Learn more in our articles on checking image quality and color picker guide.