Zovo Palette Lab

Description

From the marketplace listing

A WCAG color contrast checker and accessible color palette generator for designers, front-end developers and accessibility reviewers. Check one pair: give a text colour and a background in hex (with or without #), 8-digit hex with alpha, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) or a CSS colour name. Wide-gamut colours are clipped to sRGB with a note. Zovo Palette Lab returns the computed WCAG 2.x contrast ratio and pass or fail for AA and AAA normal text, large text (24px, or 18.66px bold) and 3:1 for UI components and graphics. Ratios are truncated to two decimals and rounded down, so a ratio of 4.499:1 is shown as 4.49 and fails AA instead of looking like a pass. Translucent text is composited over the background first, the way browsers paint it in sRGB. When a pair fails, it suggests the nearest passing colours for AA and AAA, both darker and lighter, by changing only OKLCH lightness so the hue and chroma of your brand colour stay as close as sRGB allows. Each suggestion comes with its calculated ratio. APCA Lc is shown as secondary, clearly labelled draft information. Check a whole palette: 2 to 12 colours become a pairwise contrast matrix showing which combinations work for body text, large text and UI, plus a recommended text colour for each background (a palette colour that passes AA, otherwise black or white). Generate an accessible color palette from one hex colour: a 50-950 tonal scale built in OKLCH where 50-400 pass AA with black text, 500 passes AA with both white and black text, 600 passes AA with white text and 700-950 pass AAA with white text. Each step lists its ratios on white and black. Download CSS custom properties (with a Tailwind v4 @theme block) or a Tailwind config JSON, or copy the snippets. The interactive view shows live swatches with sample text at real sizes, ratio badges, pass and fail chips, colour pickers that re-run the check, a palette matrix and copy buttons. Limitations: works with colour values only (it does not read colours from images, screenshots or web pages, resolve CSS variables or currentColor, or rate a gradient as a whole, so check each gradient stop); a contrast ratio is one part of accessibility, not a full conformance audit; APCA is informational only.