Color Converter and WCAG Contrast Checker

Convert a color

Color (HEX, rgb() or hsl())

Or pick one

Check contrast

Text color

Background color

Contrast is calculated with the WCAG 2.x formula. Ratios are not rounded up, so 4.49 fails a 4.5 requirement.

What does this tool do?

It does two jobs that designers and developers need all the time. First, it converts a color between HEX, RGB, HSL and CMYK. Second, it checks whether text is readable on a background by calculating the contrast ratio and comparing it with the WCAG accessibility levels.

Color formats it understands

#2f80ed          HEX (3, 4, 6 or 8 digits)
rgb(47, 128, 237)  RGB, with rgba() for transparency
hsl(214, 84%, 56%) HSL, with hsla() for transparency
navy, orange       a few basic color names

Example

The color #2f80ed converts to:

HEX   #2f80ed
RGB   rgb(47, 128, 237)
HSL   hsl(214, 84%, 56%)
CMYK  cmyk(80%, 46%, 0%, 7%)

Grey text #767676 on a white background has a contrast ratio of about 4.54 : 1, which just passes the AA requirement for normal text. #777777 on white is about 4.48 : 1 and fails.

WCAG contrast levels

AA is the usual target: at least 4.5 : 1 for normal text and 3 : 1 for large text (about 24 px, or 19 px if bold). AAA is stricter: 7 : 1 for normal text and 4.5 : 1 for large text. Buttons, icons and form borders need at least 3 : 1 against their surroundings.

Frequently asked questions

Why does a small change in a grey make the check fail?

Contrast depends on perceived brightness, and the pass line is exact. A grey just under the limit fails even if it looks the same to you, so test the real values.

Why are the CMYK numbers only approximate?

The CMYK shown is the simple screen-based conversion. Printers use colour profiles, so a printed result can look different.

Does transparency affect contrast?

Yes, but this tool works with solid colors. For semi-transparent text, check the final blended colors on the actual background.

What is the difference between HSL and HEX?

They describe the same color. HEX and RGB mix red, green and blue. HSL uses hue, saturation and lightness, which makes it easier to make a color lighter or darker by hand.

Are my colors uploaded?

No. All the maths runs in your browser.

Results are estimates for information only and are not financial, tax or legal advice.