1 Upload files
Drag & drop files here
Upload images, PDFs, SVGs, or design files to extract colors
Max file size 50MB
2 Extracted colors 0 colors
3 Contrast results 0 colors tested
| Color | On white text | On black text | ||||||
|---|---|---|---|---|---|---|---|---|
| Contrast ratio | AA (Normal) | AA (Large) | AAA (Large) | Contrast ratio | AA (Normal) | AA (Large) | AAA (Large) | |
No colors match the current filters.
Contrast Checker
Large heading text
Normal body copy at 16px sits here so you can judge legibility in context.
Small print at 13px — the hardest case to pass.
Color Library
Reports
WCAG Guide
WCAG 2.1 contrast is a ratio between the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white).
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text (< 18.66px, or < 24px bold) | 4.5 : 1 | 7 : 1 |
| Large text (≥ 18.66px bold, or ≥ 24px) | 3 : 1 | 4.5 : 1 |
| UI components & graphical objects | 3 : 1 | — |
| Incidental / disabled / decorative | Exempt | Exempt |
Relative luminance
Each sRGB channel is normalised to 0–1, linearised (c/12.92 below 0.03928, otherwise ((c+0.055)/1.055)^2.4), then weighted 0.2126R + 0.7152G + 0.0722B.
Contrast ratio
(Llighter + 0.05) / (Ldarker + 0.05). Order doesn't matter — the ratio is symmetric.
What it misses
The 2.x formula ignores font weight, hue and dark-mode perception. APCA (drafted for WCAG 3) addresses these but is not yet normative — check against 2.1 for compliance.
Projects
Group uploads and palettes into projects. Every saved palette in your can be assigned to a project on a paid plan.
Teams
Invite teammates to review contrast reports together. Available on the Team plan.
Integrations
Connect Figma, Storybook or a CI check that fails builds when a token drops below AA.