Color Palette and Contrast: WCAG Check Guide
Headlines melting into backgrounds hurt readability. This tool extracts 6 dominant colors with HEX codes from images. Pick text and background for instant WCAG AA (4.5:1) and AAA (7:1) verdicts. All on-device.
Step by step
- Select an image (PNG/JPG/WebP under 20 MB).
- View the 6 colors with codes.
- Click a swatch to set text color.
- Pick background with the color input.
- Read the ratio and AA/AAA verdict, apply to the theme.
Example scenario
A designer sets navy from a cover as text color. On white the ratio reads 12.4:1, AAA pass. On light gray it stays 2.1:1, darkening reaches 4.6:1 for AA.
Check your result
Confirm ratios above 4.5, aim for 7 in small text. Grayscale-test for color blindness. Apply verdicts to the theme.
Frequently asked questions
How many colors?
The top 6 dominant colors list.
What is AA?
The 4.5:1 normal-text threshold.
Is AAA required?
Recommended for small text, not mandatory.
Transparency?
Alpha is ignored; opaque equivalents used.
Uploaded?
No, analysis is browser-local.
Open the tool: Color Palette and Contrast →
Keep an original copy before processing your file. Examples are illustrative; results depend on your document.