Loading…
Loading…
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
Also covers: Color contrast checker · WCAG contrast checker · Accessibility color checker
Uses the WCAG 2.2 contrast formula (relative luminance). Translucent text is blended onto the background first. Ratios are rounded down, so 4.499:1 fails AA.
Contrast ratio
5.42 : 1
Passes AA for all text.
WCAG 2.2
Normal text (16px): The quick brown fox jumps over the lazy dog.
Large text (24px)
Button outlineClosest passing text colours
Same hue and chroma, lightness moved as little as possible (in OKLCH).
Any CSS format; opacity is supported for the text.
The ratio, pass/fail for each WCAG level, and the closest colour that passes if it doesn't.
WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for large text (24px, or 18.66px bold) and for UI components and graphics. AAA: 7:1 and 4.5:1.
The thresholds are strict minimums, so this tool rounds down — 4.499 is not 4.5.
(L1 + 0.05) / (L2 + 0.05), where L is each colour's relative luminance as defined in WCAG 2.2.
APCA is a candidate method for a future WCAG 3; it isn't a standard yet, so legal and procurement requirements still use the WCAG 2 ratio shown here.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.
CSS
Layer soft, hard, inset and glowing box-shadows with a live preview, and copy the CSS.