WCAG 2.2 ratios
Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 and 4.5:1. User-interface boundaries and meaningful graphics generally use 3:1.
Private palette and accessibility workspace
Pagan Color & Contrast Studio
Check readable color pairs, build and export palettes, extract dominant colors from an image and preview common color-vision-deficiency simulations entirely in your browser.
Color work stays on your device
Images are decoded into a local canvas. Palette extraction, contrast calculations, simulations and exports use first-party JavaScript with no upload endpoint or remote color service.
Contrast checker
Test the colors people must read
WCAG 2.2 contrast ratios are calculated from the rendered foreground and background colors.
Foreground
Text or icon color
Background
Surface color
Rendered result
0.00:1 contrast
Live preview
Readable design is deliberate.
Normal body text should remain clear without relying on perfect eyesight or a perfect display.
Large text has a lower WCAG threshold.
WCAG checks here cover a flat color pair. Gradients, images, thin fonts, antialiasing and changing backgrounds still need testing in the final design.
Palette workspace
Build a palette with evidence
Add colors manually, derive a perceptual scale and inspect every pair in a contrast matrix.
0 colors
Contrast matrix
Cells show the WCAG contrast ratio. Green meets 4.5:1, gold meets 3:1 and dim cells fail both thresholds.
Image palette lab
Pull useful colors from an image
The image is resized to a bounded local canvas, sampled and clustered in a perceptual color space. Nothing is uploaded.
No image loaded.
Click the preview to sample an exact pixel. Simulations are design approximations, not a medical or diagnostic view of any individual person’s vision.
Modern color formats
Every color is shown as HEX, RGB, HSL and OKLCH. OKLCH helps create visually smoother scales by separating lightness, chroma and hue.
Color alone is not enough
Do not rely only on red versus green, hue changes or subtle saturation. Pair color with labels, icons, shapes, patterns or text whenever meaning matters.