HueCheck Palette Lab

HueCheck Palette Lab checks color contrast against WCAG 2.x and builds accessible color palettes. It is built for product designers, front-end developers, design-system teams, and accessibility reviewers.

Check one pair: give a text color and a background in hex, 8-digit hex with alpha, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...), or a CSS color name. The tool returns the WCAG 2.x contrast ratio and pass or fail for AA and AAA normal text, large text, and the 3:1 rule for UI components and graphics. Ratios are truncated to two decimals rather than rounded up, so 4.499:1 shows as 4.49 and fails AA. Translucent text is composited over the background first. When a pair fails, it suggests the nearest passing colors for AA and AAA, darker and lighter, by changing only OKLCH lightness so the hue and chroma stay as close as sRGB allows. APCA Lc is shown as draft, informational data.

Check a palette: 2 to 12 colors become a pairwise contrast matrix that shows which combinations work for body text, large text, and UI, plus a recommended text color for each background.

Generate a scale: from one hex color it builds an 11-step 50-950 tonal scale in OKLCH with defined contrast targets (for example, step 600 passes AA with white text). Each step lists its ratios on white and black. Downloads are CSS custom properties (with a Tailwind v4 @theme block) and a Tailwind config JSON.

The interactive view shows swatches with sample text at real sizes, ratio badges, color pickers that re-run the check, and copy buttons.

Example: "Does #0078D7 text on a white background pass WCAG AA? If not, give me the nearest color that does."

Limitations: it works with color values only. It does not read colors from images, screenshots, or web pages, resolve CSS variables, or rate a gradient as a whole. A contrast ratio is one part of accessibility, not a conformance audit. APCA results are informational only.