crud.md
// crud.md / color-contrast

Pick colors that are actually readable.

Drop in any two colors — HEX, RGB, HSL or OKLCH — and see the WCAG contrast ratio with AA/AAA pass-fail for normal and large text, plus each color translated into every format with one-click copy. It all happens in your browser; nothing is uploaded.

color-contrast · v1.0 local-only

      FAQ

      Is my data sent anywhere?+

      No. The colors you type and everything derived from them — conversions, the contrast ratio, the pass-fail grades — are computed entirely in your browser and never sent to a server. We count anonymous, aggregate usage on our own server (a page view, that a check was run) — never your colors.

      What do AA and AAA actually mean?+

      They are WCAG 2.x conformance levels for text contrast. For normal text, AA needs a ratio of at least 4.5:1 and AAA needs 7:1. For large text (roughly 18.66px bold or 24px regular and up), the bar drops to 3:1 for AA and 4.5:1 for AAA. The ratio runs from 1:1 (identical) to 21:1 (pure black on pure white). Alpha is ignored in the ratio — composite your color over its real backdrop first if it's translucent.

      Why OKLCH, and how accurate is it?+

      OKLCH is a perceptual color space (CSS Color 4): equal steps in its lightness and chroma look like equal steps to your eye, which makes it far better than HSL for building accessible, even-looking palettes. We convert via the standard sRGB → linear → OKLab → OKLCH matrices, so the numbers match what your browser computes. No login, no payment — this one is free.