Color converter and contrast checker
Convert between HEX, RGB and HSL, then check whether a text and background pair meets WCAG contrast.
tool 12 of 12 []
all shortcuts ?
Contrast check
How to use it
- Enter a color as hex (#abc, #aabbcc or #aabbccdd with alpha), rgb(26, 115, 232) or hsl(214, 82%, 51%). Modern space-separated syntax with a slash for alpha also works.
- The converted forms appear below the swatch, and you can copy any of them.
- In the contrast check, enter a text color and a background color. The ratio is computed with the WCAG 2.x relative luminance formula and checked against AA and AAA thresholds.
- Colors with alpha are blended first, as a browser would paint them: the background over a white page, then the text over that background.
Examples
Select an example to load it into the tool.
- Hex
#ff6b35 - RGB
rgb(34, 139, 34) - HSL with alpha
hsl(280 60% 45% / 0.6) - Low contrast pair
#999999
Frequently asked questions
What contrast ratio do I need?
WCAG 2.x level AA requires at least 4.5 to 1 for normal text and 3 to 1 for large text (18 pt, or 14 pt bold) and for interface components. Level AAA asks for 7 to 1 and 4.5 to 1.
Why do converted values sometimes shift by one?
RGB channels are whole numbers, and HSL percentages are rounded, so a round trip such as rgb to hsl and back can differ by one in a channel. Hex and RGB are exact in both directions.
Are color names like "tomato" supported?
Not in this version. Enter a hex, rgb() or hsl() value. Looking up the hex of a named color is a quick search.
What does 8-digit hex mean?
The last two digits are alpha, from 00 (transparent) to ff (opaque). #1a73e880 is the same blue at about 50 percent opacity.
Does anything get uploaded?
No. The conversion is a few lines of arithmetic that run in your browser.