Paste any CSS color to get it in HEX, RGB, HSL, HWB and OKLCH, then check a text and background pair against the WCAG contrast rules. If a pair fails, the checker finds the nearest shade of your text color that passes.
Convert a color
Read as hex.
- HEX#42a4c7
- HEX + alpha#42a4c7ff
- RGBrgb(66, 164, 199)
- HSLhsl(195.8, 54.3%, 52%)
- HWBhwb(195.8 25.9% 22%)
- OKLCHoklch(67.55% 0.1036 225.22)
- OKLaboklab(67.55% -0.073 -0.0735)
- Nearest namecadetblue (#5f9ea0)
Check contrast
Read as hex.
Read as hex.
4.48:1contrast
- FailAA, normal textWCAG 1.4.3, body text4.5:1
- PassAA, large text18pt (24px), or 14pt (about 18.7px) bold3:1
- FailAAA, normal textWCAG 1.4.6, enhanced7:1
- FailAAA, large textEnhanced, large text4.5:1
- PassUI and graphicsWCAG 1.4.11, icons, borders, focus rings3:1
Normal text at 16px. The quick brown fox jumps over the lazy dog.
Large text at 24px
Bold text at 18.7px counts as large
A button outline
Closest text color that reaches 4.5:1 (AA)
Lighter: not possible. Even white only reaches 1.00:1 against this background.
Closest text color that reaches 7:1 (AAA)
Lighter: not possible. Even white only reaches 1.00:1 against this background.
Runs entirely in your browser. Nothing you type or upload is sent to a server.
What the color formats mean
Every format on this page describes the same thing, an amount of red, green and blue light, in a different way. HEX writes the three amounts as pairs of base-16 digits from 00 to FF, so #42a4c7 is red 66, green 164, blue 199. An optional fourth pair is opacity, and the three- and four-digit forms double each digit. RGB writes the same numbers in decimal. Both are exact but hard to adjust by eye: making a color slightly darker means changing all three numbers by different amounts.
HSL and HWB were added to CSS to fix that. HSL gives a hue as an angle on the color wheel, then saturation and lightness as percentages; HWB gives a hue, then how much white and black to mix in, which is how a painter thinks. Both are easier to tweak, but their lightness is a formula, not a perception. Pure yellow and pure blue are both 50% lightness in HSL, yet yellow looks far brighter.
OKLCH and its rectangular twin OKLab solve that. Published by Björn Ottosson in 2020 and adopted in CSS Color 4, they are built from measurements of how people perceive color, so a color at 60% lightness looks about as light as any other at 60%, whatever its hue. That makes OKLCH the best format for building palettes, generating hover states, or darkening a brand color for text without it turning muddy. It can also describe colors brighter than a standard sRGB monitor shows, which is why a vivid OKLCH value sometimes has to be mapped to the nearest color a hex code can hold.
How WCAG measures contrast
The Web Content Accessibility Guidelines compare the relative luminance of two colors: each channel is converted from its encoded value to linear light, then weighted by how sensitive the eye is to it (green counts for about 72%, red 21% and blue 7%). The ratio is (lighter + 0.05) divided by (darker + 0.05), which runs from 1:1 for two identical colors to 21:1 for black on white.
| What | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or about 18.7px bold) | 3:1 | 4.5:1 |
| Icons, input borders, focus rings, chart lines | 3:1 | Not defined |
AA is the level that accessibility laws and audits usually point to: Section 508 in the United States references WCAG 2.0 AA, and the European standard EN 301 549 references WCAG 2.1 AA. The rules do not apply to logos, to purely decorative text, or to controls that are disabled.
Thresholds are not rounded
#777777 on white is 4.48:1 and fails AA. #767676, one step darker and impossible to tell apart, is 4.54:1 and passes.
Some checkers round to one decimal and report 4.5:1 for colors that do not actually reach it. This one decides on the exact figure. Transparent colors are measured as they appear: a translucent text color is blended with its background first, exactly as the browser draws it, and the blended color is what gets measured.
Fixing a pair that fails
When the text color falls short, the usual fix is to keep its hue and change only its lightness. The checker does that in OKLCH, holding hue and chroma steady and searching for the closest lightness, in each direction, that reaches 4.5:1 and 7:1. The result still reads as the same color, just deeper or paler. A common pattern is to keep a light brand color for large headings and backgrounds, where 3:1 is enough, and use its darker shade for body text and links. If no shade gets there, the message says why: either even black or white falls short against that background, or the text is too transparent to ever reach the ratio.
Contrast is not only a web concern. A QR code needs strong contrast between its dark modules and the light background to scan reliably, and a social share card in the link preview checker is often viewed small, on a phone, in sunlight. For photos and other images, see the image compressor.
