Color & design

Web and UI design utilities: convert colors between HEX, RGB, and HSL; check WCAG contrast ratio between foreground and background; convert rem to pixels (and back) using root font size. sRGB math only — not a substitute for a full accessibility audit.

Contrast ratio is the tool most worth running before you ship a palette. WCAG 2 expresses it as a ratio against white, running from 1:1 for identical colours to 21:1 for black on white; the AA threshold is 4.5:1 for body text and 3:1 for large text, with AAA asking for 7:1. Light grey placeholder text and brand colours on coloured buttons are the usual failures. Passing the ratio is a floor rather than a guarantee, since it says nothing about text size, spacing, or whether colour alone carries meaning — that last point matters for colour-blind users, so pair any colour signal with a label or icon. The rem converter assumes a root font size you set, but users can change theirs, which is exactly why sizing in rem rather than pixels is worth the trouble.