WCAG 2.2 Contrast Ratios: Thresholds, Transparent Backgrounds and Checks

To check text in a page or presentation, identify the text size, foreground and actual background. Enter #767676 and #ffffff in the contrast checker to see 4.54:1 with a normal-text AA pass. Choose the relevant target and condition before interpreting that result.

Select the WCAG 2.2 AA or AAA threshold

The CSS conversion is 1pt = 4/3px, so 18pt is 24px and 14pt is approximately 18.67px. Check equivalent size and actual weight for the font in use. Readable placeholder guidance and text shown on hover should be inspected too.

Compare white-background examples without rounding the decision

A ratio of 4.499 does not pass by rounding up to 4.5. Read the checker’s conformance cell as well as its two-decimal display. Swapping foreground and background leaves the ratio unchanged.

Calculate relative luminance and the ratio

Divide each 8-bit sRGB channel by 255 to get c. Linearize it with c/12.92 when c≤0.04045, or ((c+0.055)/1.055)^2.4 otherwise. Relative luminance is L = 0.2126R + 0.7152G + 0.0722B using those linearized channels. With the lighter luminance L1 and darker L2, the ratio is (L1+0.05)/(L2+0.05).

Black has L=0 and white L=1, giving 1.05/0.05 = 21. This is a different calculation from HSL lightness. The conversion guide and converter explain color notation and channel values.

Check translucency, images and dark mode

The checker accepts #RGB or #RRGGBB and does not parse alpha, images or complete CSS. The [conversion guide](/en/blog/color-conversion-guide/) explains compositing. Inspect specified colors and layers, rather than sampling anti-aliased glyph edges. Correct an input error before using the result.

Adjust colors and add other information cues

White text on #3b82f6 falls below normal-text AA. Changing the background to #1d4ed8 gives approximately 6.70:1. Explore candidates with the palette guide and generator, then remeasure hover and focus states. Underline links and accompany errors with an explanation and icon.

The utility category also links to the checker. Favorite it to reopen it from My Tools in the same browser.

Tools Hub editorial staff checked WCAG conditions, numerical examples, inputs and swapping on November 8, 2026. This text-contrast check is one part of assessing a page’s WCAG conformance.

FAQ

Does a displayed 4.50:1 mean normal-text AA passes?

Not always. #6e7978 on white is approximately 4.4976:1. It displays as 4.50:1 but fails normal-text AA. The tool uses the unrounded ratio for its pass/fail cells.

What counts as large text in pixels?

The threshold is at least 18pt, or at least 14pt bold. In CSS these are 24px and approximately 18.67px. Consider the actual font weight and equivalent size as well.

Are faint placeholders exempt?

Placeholder text that provides readable guidance is subject to the text contrast requirement. Assess it separately from exceptions such as logotypes, pure decoration or inactive components.

Which background should I enter for a translucent card?

Use the composited background that is actually visible. Test the least readable locations and states when an image or scroll position changes it. The checker compares opaque three- or six-digit HEX colors.

@misc{tools_hub_contrast_ratio_guide_2026,
  author = {{Tools Hub Editorial Team}},
  title = {WCAG 2.2 Contrast Ratios: Thresholds, Transparent Backgrounds and Checks},
  year = {2026},
  url = {https://the-tools-hub.net/en/blog/contrast-ratio-guide/}
}