The contrast checker works like this: it measures WCAG contrast ratios for foreground/background pairs and flags AA (4.5:1) and AAA (7:1) compliance. Everything happens on your device - the input never leaves your tab unless the tool clearly states it performs a server-side lookup.
How to use the Contrast Checker
Select or drop your image.
Adjust the available settings while watching the preview.
Check dimensions, quality and format before exporting.
Download the result and keep the original when quality matters.
Features
Runs on your device via the Canvas and WebAssembly APIs
Batch-friendly when you have several files
Original images stay untouched
Common mistakes to avoid
Over-compressing images that contain small text
Exporting transparency to JPEG
Examples
Input
Result
#777 on #fff
4.47:1 - fails AA by a hair; #767676 passes at 4.54:1
Best used for
Getting a reliable answer for contrast checker without installing an app
One-off tasks done in under a minute from any device
Checking results before committing them to something important
Working on a phone where desktop software is unavailable
Privacy
Images are processed on your device; nothing is uploaded unless a tool explicitly says a server lookup is involved.
Frequently asked questions
What ratio do large text and UI elements need?
AA accepts 3:1 for text 24px+ (or 19px bold) and for meaningful UI graphics - icons, input borders.
What do the AA and AAA thresholds mean?
WCAG accessibility levels: AA requires 4.5:1 contrast for body text, AAA requires 7:1. The tool measures your foreground/background pair and flags both, plus the large-text relaxations.
Which colour formats can I enter?
HEX and RGB - both convert through the same relative-luminance math the WCAG formula specifies.