Contrast Checker
WCAG 2.1 contrast ratio and WCAG 3.0 APCA — two standards, two separate readouts, never merged. Live preview and a nearest-compliant-colour suggestion when a pair fails.
Accessibility suggestion
This pair already clears AA for normal text. Nice.
The quick brown fox jumps over the lazy dog. Readable contrast is the balance of tonal values against the surface behind them.
WCAG 2.1 Contrast Ratio
- Normal text — AA (≥ 4.5:1)
- Large text — AA (≥ 3:1)
- Normal text — AAA (≥ 7:1)
- Large text — AAA (≥ 4.5:1)
- UI components & graphics (≥ 3:1)
WCAG 3.0 APCA (Lc)
Lc 75 — body-text minimum. APCA models perceived lightness contrast; polarity-aware, so it is not comparable to a 2.1 ratio.
Related tools
Color Converter
One value in — HEX, RGB, HSL, HSV, CMYK, Lab, OKLCH, CSS name and Tailwind out. Copy any format.
Palette Generator
6 harmony modes from one base colour, including double-complementary. Export as CSS, SCSS, Tailwind or JSON.
Tints & Shades
A 10-step 50-900 scale for design tokens. Tints lighten, shades darken — never swapped.
Gradient Generator
Linear, radial and conic CSS gradients with a live preview and 22 curated presets.
Color Picker
A canvas hue/saturation/lightness picker with keyboard control and your last 10 colours.
Color Blindness Simulator
See any palette or image through 8 types of colour vision deficiency.
Image Color Extractor
Upload an image, get its 5 dominant colours — nothing leaves your browser.
Tailwind Color Mapper
Find the nearest Tailwind CSS v3 token for any colour, with the full family scale.
CSS Variables Exporter
Turn a list of named colours into CSS custom properties, SCSS, Tailwind config or JSON.