Contrast Checker
Check if your text and background combination is accessible. Pick colors manually with the color windows, use White / Black presets, or upload an image and click any pixel. Instant WCAG AA & AAA grades.
Drop your image here
or click to browse, drag and drop or paste works too
Direct image URLs only, must end in .jpg, .png, .gif, .webp, or .svg
Click image or palette to set as Text
Text color
rgb(59, 130, 246)
Background color
rgb(255, 255, 255)
Contrast ratio
4.10 : 1
Good contrast
WCAG grades
The quick brown fox jumps over the lazy dog, normal text 16px.
Large text 24px bold
Loading image...
What is contrast checking?
Readable text for everyone
Contrast ratio measures how distinguishable text is from its background, from 1:1 (same color) to 21:1 (black on white). Our checker uses the WCAG relative luminance formula, the same standard auditors and design systems rely on.
Aim for at least 4.5:1 for normal text (AA), 3:1 for large text, and 7:1 for AAA. Test your brand colors, button styles, or any image text overlay before shipping.
How to use
01
Choose colors
Type HEX, use the native color window, or hit White / Black / Random presets. Swap anytime.
02
Or pick from image
Click the camera icon, upload any JPG/PNG/WebP, then click the image or its extracted palette. Toggle Text / Background target.
03
Ship accessible UI
Read the ratio, AA/AAA grades, and live preview. Copy CSS or download the TXT report.
Real-life examples
Body copy 16px: #767676 on #FFFFFF (4.54:1 pass) vs #999999 (2.85:1 fail)
The #1 real check. Secondary gray text looks clean but light grays fail. Try both pairs above: darken muted text to #767676 or #595959 to cross AA. Smallest long-read text needs the full 4.5:1.
Button labels: white on blue
Most-tested UI check. Vivid blues (~3.9:1) pass large text only; darken button fills to ~5–6:1 for normal-size labels. Test normal, hover and disabled states separately.
Links inside body text
Users paste link blue + body background to see if links identified by color alone still hit 4.5:1. If not, darken the link or add underline (color alone must not be the only cue).
Inputs, borders & small print 13px
Input borders, checkboxes and 13px disclaimers are where contrast dies. Borders/UI need 3:1; 13px captions need 4.5:1 like body. Paste your border gray + field background here.
Headings 24–32px & graphics
Large text (24px+, or 19px bold+) only needs 3:1, same as icons, chart strokes and focus rings. Test headings, icons and data-viz lines as separate pairs from body copy.
Text over photos & gradients
Top image use-case: upload the hero, click the lightest and darkest pixels behind the headline. If either fails, add a scrim or text-shadow and re-test the blended color. Never test just one stop of a gradient.