Color Converter & WCAG Contrast Checker

What you enter is processed only in this browser and is never sent to a server. How it works

How to use it

The page has two parts, the color converter at the top and the contrast checker below it, and neither affects the other.

Color converter

Type a CSS color value into the Color box, or choose one with the color picker to its left. HEX is read with 3, 4, 6 or 8 digits, and the # is optional. Both ways of writing RGB, rgb(51, 102, 255) and rgb(51 102 255), are read, and so are color names such as rebeccapurple.
Change the transparency with the Alpha (opacity) slider next to the swatch. You can see the effect in how much of the checkerboard behind the swatch shows through.
All formats lists seven lines, HEX, RGB, HSL, HWB, LAB, LCH and OKLCH, and each can be copied on its own. When alpha is below 100%, one more line appears: “HEX (with alpha)”, written with 8 digits.

Contrast checker

Enter a Text color and a Background color. “Swap colors” switches the two.
Contrast ratio shows the ratio, and the four boxes below it say “Pass” or “Fail” for each level.
The preview at the bottom shows the two colors together as large text and as normal text.

One color, seven notations

The color you start with, #3366ff, converts like this.

Format	Result	What the numbers mean
HEX	`#3366ff`	Red, green and blue as two hex digits each
RGB	`rgb(51, 102, 255)`	Red, green and blue from 0 to 255
HSL	`hsl(225, 100%, 60%)`	Hue angle, saturation, lightness
HWB	`hwb(225 20% 0%)`	Hue angle, amount of white mixed in, amount of black mixed in
LAB	`lab(47.4 26.93 -82.47)`	Lightness, green–red axis, blue–yellow axis
LCH	`lch(47.4 86.76 288.08)`	Lightness, chroma, hue angle
OKLCH	`oklch(0.5726 0.2338 265.28)`	Lightness, chroma, hue angle

HEX and RGB are the same numbers in different number bases. HSL and HWB rearrange those numbers along axes that are easier for people to work with. LAB, LCH and OKLCH are color spaces designed around how people perceive color, and OKLCH is a refinement of LCH that is more perceptually uniform and can be used directly in CSS as oklch(). Notice that the hue angle of this one blue is 225 in HSL, 288.08 in LCH and 265.28 in OKLCH. Each color space measures the angle from its own reference, so copying a number from one format into another gives you a different color.

Lightness in HSL versus lightness in OKLCH

HSL lightness is the average of the largest and the smallest of the red, green and blue values, so it is a poor match for how bright a color looks. Pure yellow, hsl(60 100% 50%), and pure blue, hsl(240 100% 50%), have exactly the same HSL lightness of 50%. Run both through the converter and you get this.

Yellow is oklch(0.968 0.211 109.77), an OKLCH lightness of 0.968.
Blue is oklch(0.452 0.3132 264.05), an OKLCH lightness of 0.452.

Measure them against white and the gap is plain. In the contrast checker, with the background color set to #ffffff, yellow #ffff00 comes out at 1.07:1 and is barely visible, while blue #0000ff is 8.59:1. When you are building a set of colors that differ in hue but look about equally bright, matching OKLCH lightness gives a more even result than matching HSL lightness.

How the WCAG contrast ratio is calculated

The tool uses the WCAG 2 formula. It finds each color’s relative luminance (the red, green and blue values, converted to linear light, multiplied by weights and added up), calls the lighter one L1 and the darker one L2, and calculates (L1 + 0.05) ÷ (L2 + 0.05). Two identical colors give 1:1, and black against white gives 21:1.

Level on the page	Ratio required
AA · normal text	4.5:1
AA · large text	3:1
AAA · normal text	7:1
AAA · large text	4.5:1

“Large text” means text of at least 18pt (about 24px) at normal weight, or at least 14pt (about 19px) in bold. AA is the level most accessibility guidelines ask for, and AAA is stricter.

The starting pair, text color #1f2937 on background color #ffffff, is 14.67:1 and passes all four levels.
Gray #767676 on a white background is 4.54:1 and passes AA for normal text. One step lighter, #777777 is 4.47:1 and fails.

The ratio on the page is cut off after the second decimal place, not rounded. That way a pair at 4.499:1 never displays as 4.50:1 while being marked as a fail. Pass or fail is decided on the value before it is cut off.

Contrast with semi-transparent colors

The WCAG formula only deals with opaque colors. So a color with alpha is first flattened into the color you would actually see, and the ratio is calculated from that.

A semi-transparent background color is treated as sitting on a white page.
A semi-transparent text color is treated as sitting on the background color that results.

Text color rgb(0 0 0 / 50%) on background color #ffffff turns into gray text at 3.97:1, which passes only AA for large text. On a real page, if a color other than white, or a photo, lies behind a semi-transparent background, the result will be different. In that case, enter the background the viewer finally sees as an opaque value and measure with that.

Colors outside the sRGB gamut

LAB, LCH and OKLCH can describe colors that an ordinary sRGB screen can’t produce. oklch(70% 0.3 150) is one of them. Enter it and a notice says the color is out of gamut, and the results look like this.

HEX is #00cb00 and RGB is rgb(0, 203, 0). That is not the color you entered. It is that color clipped to fit the sRGB range.
The LAB, LCH and OKLCH lines give the original color, unclipped.
The HSL and HWB lines are the clipped color carried over into those formats, the same as HEX and RGB. They read hsl(120, 100%, 39.84%) and hwb(120 0% 20.32%), with no out-of-range numbers.

The swatch and the color picker also show the clipped color.

Frequently asked questions

I moved the alpha slider and the value I had typed turned into rgb(). Why?

The slider rewrites the input as an rgb() value that includes the alpha. Enter oklch(62% 0.19 259), drag the slider to 50%, and the input becomes rgba(53, 129, 246, 0.5). It doesn't go back to the original notation, so if you need an OKLCH value with alpha, move the slider first and then copy the OKLCH line under "All formats". A color outside the sRGB gamut is clipped to an in-gamut value when this happens.

I entered #3366ff80 and the alpha shows as 0.5. Is it exactly 50%?

The last two digits of an 8-digit HEX, 80 here, mean 128 on a scale of 255, and 128 ÷ 255 = 0.50196… It is not exactly 50%. The RGB, HSL, HWB, LAB, LCH and OKLCH lines all round the alpha to two decimal places and show 0.5. If you need exactly 0.5, enter the alpha as a percentage or a decimal, as in rgb(51 102 255 / 50%).

Does the contrast ratio change if I swap the text and background colors?

Not when both colors are opaque. #3366ff and #ffffff give 4.68:1 whichever one is the text. With a semi-transparent color it can change. Text rgb(255 255 255 / 50%) on background #000000 is 5.28:1, but flip them with "Swap colors" and the semi-transparent white background, sitting on a white page, is simply white, which gives 21:1.

Why can't it read values written with oklab() or color(display-p3 …)?

This tool reads HEX, rgb(), hsl(), hwb(), lab(), lch(), oklch(), color names and transparent. It can't read the oklab() and color() functions, keywords such as currentColor, or variables written with var(), and it answers with "That doesn't look like a color." To enter an OKLab value, rewrite the same color as oklch() first.

Color Converter & Contrast Checker

All formats

Contrast checker