Color Converter & Contrast Checker
Paste any CSS color to get every format, or check whether a text/background pair meets WCAG contrast requirements, and get a fix if it doesn’t.
| Check | Needs | Result |
|---|
Normal body text at 15px. The quick brown fox jumps over the lazy dog.
Frequently Asked Questions
What contrast ratio does WCAG require?
WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text (18pt / 24px, or 14pt / about 18.7px bold) and for UI components and graphics. Level AAA needs 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
Each color's relative luminance L is computed from linearised sRGB (0.2126 R + 0.7152 G + 0.0722 B), and the ratio is (L1 + 0.05) / (L2 + 0.05), with L1 the lighter color. It ranges from 1:1 to 21:1.
What is OKLCH?
A perceptual color space (lightness, chroma, hue) supported in modern CSS as oklch(). Equal steps in lightness look equally different, which makes it good for building palettes.
How is the suggested color chosen?
Hue and saturation stay fixed while lightness is moved the smallest amount that reaches the target ratio, so the fix stays as close as possible to your original color.