Color Converter and Contrast Checker

What this tool does

Web pages describe the same color in several notations. The tool reads a color in hexadecimal, rgb() or hsl() notation and writes it in all three.

It also measures the contrast between this color and a background color, as the Web Content Accessibility Guidelines (WCAG) 2.2 define it, and tells you which of their requirements the pair meets.

How to use it

1. Type a color into the field “Color”, or choose one with the color picker of your browser.
2. Enter the background against which the color is used. It starts as white.
3. Read the three notations and the contrast. A preview shows text in your color on your background.
4. Select “Copy result” to copy the three notations.

Accepted are hexadecimal values with 3, 4, 6 or 8 digits, with or without the number sign, and the functions rgb(), rgba(), hsl() and hsla() with commas or spaces. Color names such as “red” are not supported.

How the result is derived

All three notations describe a color of the sRGB color space. HEX and RGB hold the same three numbers from 0 to 255 for red, green and blue, in base 16 and in base 10. HSL describes the color by its hue as an angle on the color circle, its saturation and its lightness. The conversion between RGB and HSL follows the formulas of CSS Color Module Level 4.

HSL values are rounded to one decimal place. Because HSL rounded to one decimal place cannot express every RGB color exactly, converting the HSL text back can give a channel one step away from the original.

For the contrast each channel is divided by 255 and made linear: values up to 0.04045 are divided by 12.92, larger values are raised by 0.055, divided by 1.055 and taken to the power of 2.4. The relative luminance is 0.2126 times red plus 0.7152 times green plus 0.0722 times blue. The contrast ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05.

A color that is partly transparent is mixed with the background before it is measured. A transparent background is placed on white.

Worked example

Is the gray #767676 readable as text on white?

HEX  #767676
RGB  rgb(118 118 118)
HSL  hsl(0 0% 46.3%)

Channel:    118 / 255 = 0.4627
Linear:     ((0.4627 + 0.055) / 1.055) ^ 2.4 = 0.1812
Luminance:  0.1812, because all three channels are equal
White:      1
Contrast:   (1 + 0.05) / (0.1812 + 0.05) = 4.54

The ratio of 4.54 to 1 meets the requirement of 4.5 to 1 for normal text at level AA. The slightly lighter #777777 reaches 4.478 to 1, shown here as 4.47, and fails it.

Reference: notations and contrast requirements

Large text is text of at least 18 point, or at least 14 point if it is bold. The ratio ranges from 1 to 1 for equal colors to 21 to 1 for black and white.

The guidelines say that the ratio must not be rounded to reach a threshold. The tool therefore cuts the ratio off after two decimal places instead of rounding it, and decides pass or fail with the exact value.

Common mistakes

• Judging contrast by eye on your own screen. Screens and eyes differ; the ratio does not.
• Checking a color against white when it is used on a colored or dark background.
• Forgetting states. Placeholder text, disabled-looking buttons, links and focus indicators have colors of their own.
• Assuming that equal lightness in HSL means equal brightness. Yellow and blue with a lightness of 50% have very different luminance.
• Treating a passed contrast check as proof of accessibility. Contrast is one requirement among many.

Sources

• Web Content Accessibility Guidelines (WCAG) 2.2
• Understanding Success Criterion 1.4.3: Contrast (Minimum)
• CSS Color Module Level 4