Image → colors → WCAG verdict
Contrast checker
from an image
Pull colors out of an image and test them against each other in the same pass. You get the exact ratio, the WCAG 2.2 level it meets, a live text preview, and the nearest passing shade when a pairing fails.
- No hex typing
- Nothing uploaded
- AA and AAA
Drop an image here
or paste with Ctrl+V — JPG, PNG, WebP, GIF, AVIF or BMP, up to 50 MB
Your image is processed on your device and never uploaded.
Upload an image, click a swatch to select it, then choose a background in the accessibility panel to compare against.
The numbers that matter
A pairing that passes as a heading can still fail as a paragraph.
4.5:1
AA — body text
The baseline for paragraphs, labels, buttons and anything below 18.66px bold or 24px regular. Most legal requirements point here.
3:1
AA — large text
Applies only at 18.66px bold or 24px regular and above. Also the minimum for UI component boundaries and focus indicators.
7:1
AAA — body text
The enhanced level. Worth targeting for long-form reading, and often unreachable against mid-tone backgrounds.
Why check contrast at extraction time
The moment you pull a brand color off a logo, the next question is whether text can sit on it. Answering that later — after the color is already in a stylesheet and a design review — is how sites end up with accent colors that cannot legally carry body copy.
Dedicated contrast checkers exist, but they all start by asking you to type two hex codes. Dedicated color pickers hand you a hex code and stop. Doing both in one place removes the transcription step, which is also where mistakes creep in.
How the ratio is calculated
Each color is converted to a relative luminance: its sRGB channels are linearised to undo the display transfer curve, then weighted 0.2126 red, 0.7152 green and 0.0722 blue — green counts for most because human vision is most sensitive to it.
The ratio is then (lighter + 0.05) / (darker + 0.05). The 0.05 terms model ambient screen glare, and they are why the scale tops out at 21:1 for black on white rather than running to infinity.
One consequence catches people out: the formula is symmetric. Swapping foreground and background gives the same number, so a ratio alone never tells you which color was the text.
What the suggestion does
When a pairing fails, the tool searches for the nearest passing version of your color by stepping lightness in OKLCH while holding hue and chroma fixed. You get a recognisably related shade rather than an arbitrary substitute.
Sometimes there is no answer, and the tool says so. Against a mid-tone background the achievable range is genuinely narrow — a middle grey reaches only about 5.3:1 against black and 4:1 against white, so AAA is impossible in either direction. In that situation the background has to change, not the text.
What this does not tell you
Contrast ratio is one accessibility requirement among many, and passing it does not make an interface accessible. It says nothing about focus order, semantic markup, motion sensitivity, or whether color is your only way of conveying meaning. It also models normal vision — it is not a simulation of color blindness.
Full WCAG conformance needs manual testing with real assistive technology and review by someone who does this professionally. Treat this as a fast check during design, not as an audit.