Color converter and contrast checker

How to use it

1. Type or paste a color into Color, or click the swatch button to pick one. HEX with 3, 4, 6 or 8 digits, rgb(), rgba(), hsl(), hsla(), three bare numbers such as 51, 102, 153, and the 148 CSS color names are all accepted.
2. Copy the format you need from the HEX, RGB or HSL row. Output uses the modern CSS syntax, which every current browser supports.
3. In Contrast checker, enter a text color and a background. The preview shows real text in both sizes, and the list shows which WCAG levels the pair passes.
4. Use Swap to check the reverse — for example white text on a colored button instead of colored text on white.

How the conversions and the contrast ratio work

HEX, RGB and HSL

HEX and RGB are the same thing written differently: three channels — red, green and blue — from 0 to 255, written in hexadecimal (33 = 51) or in decimal. A fourth pair of digits in HEX, or a value after the slash in rgb(), is the alpha (opacity): #33669980 is the same color at about 50% opacity. The syntax is defined in CSS Color Module Level 4.

HSL describes the same color as hue (an angle on the color wheel, 0° red, 120° green, 240° blue), saturation and lightness. It is easier to adjust by hand: to make a lighter shade of #336699, raise the lightness of hsl(210 50% 40%) to 60% and keep the hue. Converting to HSL and back can move a channel by one step because HSL values are rounded to one decimal place.

Contrast ratio

The Web Content Accessibility Guidelines define contrast from the relative luminance of each color. Each channel is converted from sRGB to linear light — values up to 0.04045 are divided by 12.92, larger ones raised to the power 2.4 after an offset — and then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue, because the eye is far more sensitive to green. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 (identical) to 21:1 (black on white).

Success criterion 1.4.3 requires 4.5:1 for normal text and 3:1 for large text at level AA; level AAA raises that to 7:1 and 4.5:1. Large means at least 18 point, about 24 CSS pixels, or 14 point bold, about 18.5 pixels. Criterion 1.4.11 asks for 3:1 for icons, input borders and other graphical controls. The guidelines say the computed ratio must not be rounded up — 4.499:1 fails 4.5:1 — so this tool truncates the displayed ratio rather than rounding it.

If the text color is semi-transparent, it is first blended with the background, because that blend is what the reader actually sees.

Examples

#767676 is the lightest gray that still passes AA on white, which is why it appears in so many design systems; one step lighter, #777777, fails. Black at 50% opacity on white blends to a mid-gray with a ratio of 3.97:1.

Conversions: #336699 = rgb(51 102 153) = hsl(210 50% 40%). The short form #369 expands to the same color. #33669980 is rgb(51 102 153 / 0.502), because 0x80 is 128 and 128 ÷ 255 is 0.502. The CSS name rebeccapurple is #663399.

Limits

• sRGB only. Newer CSS color spaces such as oklch(), lab() and display-p3 are not parsed; convert them in your browser's developer tools first.
• Contrast is not the whole story. WCAG 2 contrast is a minimum. Thin fonts, very small sizes and some color-blindness combinations can still be hard to read at a passing ratio. A newer method, APCA, is being developed for a future version of the guidelines and is not used here.
• Background transparency is ignored. The ratio is only defined against an opaque background, so the background alpha is treated as fully opaque.

Sources and further reading

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2
• W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
• W3C: Understanding Success Criterion 1.4.11, Non-text Contrast
• W3C: CSS Color Module Level 4