Color Contrast & Converter

WCAG 2.x AA requires at least 4.5:1 for normal text and 3:1 for large text (24px+/roughly 19px+ bold). AAA is stricter: 7:1 for normal text and 4.5:1 for large text.

Hex (#RGB, #RGBA, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), and oklch(). Invalid input shows a specific error instead of guessing.

OKLCH is a perceptually uniform color space (lightness, chroma, hue) standardized in CSS Color Module 4. Unlike HSL, equal steps in OKLCH lightness look equally bright to the human eye across different hues, which makes it useful for building consistent color scales and gradients.

No. All parsing, conversion, and contrast math happens locally in your browser using plain JavaScript.

WCAG's contrast formula is only defined for opaque colors. If either color has an alpha channel below 1, it's first composited over an explicit opaque white canvas — the same canvas shown in the preview swatch — to resolve it to an equivalent opaque color, and the ratio is calculated from that. This matches how the color would actually render layered on a white page.