Color Contrast Checker (WCAG 2.2 AA and AAA)

WCAG 2.2 contrast thresholds

Contrast of common color pairs

How to check the contrast of two colors

1. Enter the text color. Type or paste the color of the text into the Text color box, as hex (#3b82f6), rgb(), hsl() or a CSS color name. The color picker beside it stays in sync.
2. Enter the background color. Do the same for the Background color box, for example #ffffff or white. Use the swap button to try them the other way round; the ratio is the same either way.
3. Read the ratio and the checks. The ratio runs from 1:1 (no contrast) to 21:1 (black on white). Each row says Pass or Fail against 4.5:1 and 7:1 for normal text, 3:1 and 4.5:1 for large text, and 3:1 for interface parts. #3b82f6 on #ffffff is 3.67:1.
4. Use a suggested color if it fails. When normal text fails AA, the checker offers the nearest text color that passes, keeping the hue and saturation and changing only the lightness. For the example that is #1e6ff5. Press Use to try it, and check the preview.

Frequently asked questions

How is the WCAG contrast ratio calculated?

Each 8-bit channel is turned into linear light with the sRGB transfer function, and relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 that of the darker one. For #3b82f6 the luminance is 0.2355, for #ffffff it is 1.0000, so the ratio is (1.0000 + 0.05) / (0.2355 + 0.05) = 3.67:1. Which color is the text does not matter.

What contrast ratio does WCAG 2.2 require?

Success criterion 1.4.3 (Contrast Minimum, level AA) needs 4.5:1 for normal text and 3:1 for large text. Criterion 1.4.6 (Contrast Enhanced, level AAA) needs 7:1 for normal text and 4.5:1 for large text. Criterion 1.4.11 (Non-text Contrast, level AA) needs 3:1 for user interface components, such as the border of an input or an icon button, and for graphics needed to understand the content. Large text is at least 18 pt (24 CSS pixels), or at least 14 pt (about 18.7 pixels) and bold.

Is the threshold 0.03928 or 0.04045 in the relative luminance formula?

The WCAG 2.2 text says 0.04045: a channel at or below 0.04045 is divided by 12.92, otherwise it is (c + 0.055) / 1.055 raised to 2.4. Earlier WCAG wording said 0.03928, a value from an older sRGB draft. The two never give a different result for the 8-bit colors used on the web: the closest channel values are 10/255 = 0.0392, which is below both, and 11/255 = 0.0431, which is above both. The checker uses 0.04045.

Which text and elements are exempt from the contrast rules?

Criterion 1.4.3 does not apply to text that is purely decorative, text in an inactive (disabled) control, text that is part of a logo or brand name, or text in a picture that contains significant other visual content. Incidental text, such as text that is not visible to anyone, is exempt too. Everything else, including text in images of text, needs the ratio. Check the WCAG 2.2 wording for your case; this tool only calculates the ratio.

How does the checker suggest a passing color?

It keeps the hue and saturation of your text color and changes only its HSL lightness, in steps of 0.1 percentage points, walking away from the current lightness until the pair reaches 4.5:1 (compared as shown, cut to two decimals). It reports the nearest passing color in each direction that has one. For #3b82f6 on #ffffff that is #1e6ff5, 4.51:1. The same input always gives the same suggestion. Because colors are whole 8-bit values, hue and saturation can shift by a point or two. A suggestion is a starting point: check it against your design.

Why does a ratio of 4.499 not show as 4.5?

WCAG does not allow rounding a ratio up to reach a threshold, so the page cuts the ratio to two decimals instead: 4.499 shows as 4.49 and fails. Pure red on white is 3.9985:1 exactly, which many tools round to 4.00; here it shows 3.99:1. Whatever the checker shows, a pass means the exact ratio is at or above the minimum.

How are transparent colors handled?

A color with alpha is blended first, as a browser would paint it: a translucent background over white, then a translucent text color over that background. The ratio is for the blended colors, and the page tells you when it blended. The real result on your page still depends on what sits behind the background.

Does the contrast ratio depend on font size or weight?

The ratio itself does not; only the minimum you compare it with does. Large text (18 pt or 14 pt bold and up) can use the lower 3:1 for AA and 4.5:1 for AAA. Thin fonts and small sizes can still be hard to read at a passing ratio, so treat the ratio as a floor.

What about APCA and WCAG 3?

This tool calculates the WCAG 2.x ratio, which is the one that WCAG 2.2, and the laws and policies that cite it, require. APCA, a different contrast method proposed for a future WCAG 3 draft, gives different numbers for some pairs, such as light text on mid-tone colors, and is not used here.

Is anything I enter sent anywhere?

No. The colors are read and the ratio is calculated in your browser, and nothing you type is stored or sent. Only the share link, which you copy yourself, contains your colors.