Free Online Contrast Checker (WCAG)

WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text. Icons, input borders and other UI parts need 3:1 against the colors next to them. AAA raises the text rules to 7:1 for normal and 4.5:1 for large text.

Each color's red, green and blue values are converted to linear light and weighted into a relative luminance. The ratio is the lighter luminance plus 0.05, divided by the darker plus 0.05, so it runs from 1:1 for the same color to 21:1 for black on white.

Large text is at least 18pt (24px) regular or 14pt (about 18.66px) bold. It only needs 3:1 for AA and 4.5:1 for AAA. The checker doesn't ask for a font size, so read the large-text rows only if your text is that big.

AA is the level most laws and policies point to, including EN 301 549 in the EU and the 2024 US rule for state and local government websites, which both use WCAG 2.1 AA. AAA is stricter and a good target for long reading text.

It tests the 3:1 rule for non-text parts, WCAG success criterion 1.4.11. Use it for icon colors, input borders, focus rings and chart lines. Put the part's color in the text color box and the color behind it in the background box.

The ratio on screen is rounded to two decimals, but the checks use the exact value, as WCAG requires. Gray #959595 on white is 2.995:1, so it shows 3.00:1 and still fails the 3:1 rows. Darken the color a little to pass.

It reads 6-digit hex codes only, with or without the #. Short codes like #fff, 8-digit codes with transparency, rgb(), hsl() and color names give 0.00:1 and fail every row. Write #fff as #ffffff. A wrong letter, as in #12345g, is read as a different color with no warning.

21:1, which is pure black #000000 on pure white #ffffff. Two identical colors give 1:1, the lowest. The default pair here, #1a1a1a on white, scores 17.40:1, and mid-gray #767676 on white is 4.54:1, just above the 4.5:1 AA line.

Not directly, since it compares one solid color with another. For text on a gradient or image, find the spot behind the text that is closest in lightness to the text color. Enter that color as the background and check it.

No. It uses the WCAG 2.x contrast ratio, which WCAG 2.1, WCAG 2.2 and current laws rely on. APCA is a draft method for the future WCAG 3 that scores text by size and weight, and this tool doesn't calculate it.

Yes. It's free, with no account and no limit on checks. The colors you enter stay in your browser and are not saved. On the live site, Google Analytics counts Copy ratio clicks, never the colors or the ratio.