Color Contrast Checker

What does a color contrast checker do?

A contrast ratio turns the brightness difference between text and its background into one number between 1:1 and 21:1. The ratio measures only the color pair; typeface, size and layout also affect readability. WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text (AA); at the AAA level those values are 7:1 and 4.5:1.

The tool takes two colors, computes their gamma-corrected relative luminance and reports four criteria separately. Pass and fail are shown with the words Pass and Fail, not only with color, so someone who is color blind or uses a screen reader can still read the result.

How to use it

1. Type the text and background colors, or use the color pickers. #fff and #ffffff are equivalent, and case does not matter.
2. Use Swap colors to exchange them. The ratio is symmetric and does not change; only the preview flips.
3. Replace the preview text with your own sentence to see the pair at three sizes (12 pt, 18 pt and 14 pt bold).
4. Read the four table rows and copy the result if you need it. An invalid color gets a message under its field.
5. Example loads a pair close to a threshold; Reset returns to the default colors.

WCAG thresholds and large text

WCAG defines large text as at least 18 point, or 14 point bold. The tool does not decide whether your text counts as large; it reports both classes separately and leaves the right row to you. Because the point size on screen can vary with the font and user settings, use the normal text row when you are unsure.

How the ratio is calculated

Each channel is converted from 0–255 to 0–1, linearized with gamma correction and added with weights. The ratio is the lighter color's luminance plus 0.05, divided by the darker color's luminance plus 0.05.

c = channel / 255
c_linear = c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
ratio = (L_light + 0.05) / (L_dark + 0.05)

The pass or fail decision uses the exact ratio, not a rounded one. The number shown is truncated to two decimals rather than rounded, so what you see is never higher than the real ratio. If the real ratio is 4.4984, the display reads 4.49:1 and AA normal text fails; you will not see 4.50:1 and assume it passes.

Example pairs

These pairs are design examples, not a brand or accessibility recommendation. Ratios are truncated to two decimals.

Scope, limits and sources

• Only opaque sRGB colors are supported: #RGB and #RRGGBB. Alpha channels, CSS color names, rgb() and hsl() produce an error.
• A contrast ratio alone is neither WCAG conformance nor a legal document; focus indicators, text inside images and keyboard access need separate checks.
• Other perceptual models such as APCA are not the same metric and are not included.
• The colors and preview text never leave the browser. A share link carries these values only if you choose so, and anyone with the link can see them.
• The technical details were checked on 25 October 2026 against W3C WCAG 2.2 and SC 1.4.3 Contrast (Minimum).

While trying colors for a share image there is the OG image generator, for search result appearance the SERP preview, and for page structure the heading hierarchy checker.