WCAG 2.2 Contrast: What Changed and What to Check

WCAG 2.2 is the current version of the Web Content Accessibility Guidelines, published as a W3C Recommendation in October 2023. The contrast requirements in 2.2 are the same as in 2.1, but the surrounding context has changed. This article covers what the requirements are, what changed in 2.2, and how to verify your colors. The short version first: body text needs 4.5:1 under AA, large text needs 3:1, and the AAA tier pushes those bars up to 7:1 and 4.5:1.

The Four Contrast Thresholds

WCAG 2.2 defines four contrast thresholds, split by conformance level (AA and AAA) and text size (normal and large).

AA normal text requires a contrast ratio of at least 4.5:1. Normal text is anything below 18 point (24px) or below 14 point (18.66px) when bold. This covers the vast majority of body text on the web.

AA large text requires a ratio of at least 3:1. Large text is 18 point (24px) or larger, or 14 point (18.66px) or larger when bold. The threshold is lower because larger text is easier to read at lower contrast.

AAA normal text requires a ratio of at least 7:1. This is the highest tier, recommended for content where readability is critical: long-form articles, legal text, medical information.

AAA large text requires a ratio of at least 4.5:1. The same threshold as AA normal, applied to large text at the AAA tier.

What Changed in WCAG 2.2

The contrast success criterion (1.4.3) did not change between 2.1 and 2.2. The 4.5:1 and 3:1 thresholds are the same. What changed in 2.2 is the addition of new success criteria that affect contrast-adjacent areas:

Success Criterion 2.4.11 (Focus Not Obscured) requires that when a user interface component receives keyboard focus, it is not entirely hidden by other content. This matters for contrast because a focused element that is hidden loses its visible focus indicator.

Success Criterion 2.4.12 (Focus Not Obscured, Enhanced) requires that when a component receives focus, no part of the focus indicator is hidden by author-created content.

Success Criterion 2.4.13 (Appearance) requires that the focus indicator has a minimum area and contrast against adjacent colors. This is the most contrast-relevant new criterion: the focus indicator must have at least 3:1 contrast against adjacent colors.

Two more new criteria change the layout work around the text. Success Criterion 2.5.8 (Target Size Minimum) requires interactive targets to measure at least 24 by 24 CSS pixels, with exceptions for inline text, spacing constraints, and user-agent controls. Success Criterion 2.5.7 (Dragging Movements) asks that anything operated by dragging can also be completed with a single tap or click. Neither mentions contrast directly, but a target that is too small to hit reliably fails a user no matter how readable its label is.

The forms criteria round out the release. Success Criterion 3.3.7 (Redundant Entry) says information a user already entered should not be collected again in the same session, and 3.3.8 (Accessible Authentication) bars cognitive-function tests such as recalling a password, with exceptions for security-critical flows. Read together, 2.2 tightens the experience around text and interaction without touching the contrast math itself.

How to Compute the Contrast Ratio

The WCAG contrast ratio is the relative luminance of the lighter color plus 0.05, divided by the relative luminance of the darker color plus 0.05. Relative luminance is a weighted sum of the linearized sRGB channels, defined in the W3C WCAG 2.2 specification.

The ratio ranges from 1:1 (no contrast, two identical colors) to 21:1 (black on white). The 0.05 added to each luminance accounts for ambient light flare on the screen.

The FontBlend contrast checker computes this exactly. You enter two hex colors, it linearizes the sRGB channels, computes the relative luminance for each color, and returns the ratio rounded to two decimal places. It then checks the ratio against all four thresholds and shows pass or fail for each.

What the Numbers Look Like in Practice

Ratios are easier to trust once you have a few reference points. A gray that looks fine on screen can fail by a hair. Take #767676 on white: the formula gives 4.54:1, which squeaks past AA normal. Its neighbor #777777, lighter by a single step, computes to 4.48:1 and falls short. That boundary is why the actual hex value matters more than how the gray looks.

Blue is the other classic. Tailwind blue-500 (#3B82F6) reaches 3.68:1 against white. That is enough for large text under AA and too low for body copy. Blue-600 (#2563EB) measures 5.17:1 and clears the normal bar. Same hue, one step darker, and the pair crosses the line. When a brand color fails, darkening it by a shade is often the cheapest fix, because the ratio moves faster toward the dark end of the scale.

Dark backgrounds behave differently. #38BDF8 on #0B0F1A computes to 8.93:1, comfortably past AAA, because the near-black background does most of the work. Bright text on dark surfaces tends to pass easily; failures concentrate on light backgrounds with mid-tone text. If you only test one theme, you will likely miss the direction that actually breaks. The ink on cream pair this site uses by default measures 15.49:1, which is why the interface never has to bargain with the threshold.

Common Mistakes

Using a color name instead of the actual value. "Gray text on white" can mean anything from a 3:1 ratio to a 7:1 ratio depending on which gray. Always check the actual hex value.

Checking only the body text and forgetting UI elements. Buttons, form labels, icons, and placeholder text all need to meet the thresholds. Disabled states are exempt, but they still need to be distinguishable.

Trusting the design tool's contrast checker without verifying in the browser. Some design tools compute contrast in a non-standard color space. The W3C formula is specific to sRGB, so use a checker that implements the standard.

Assuming that a color that passes AA automatically passes AAA. AAA normal requires 7:1, which is significantly harder to achieve than the 4.5:1 for AA normal. Many "accessible" color palettes pass AA but fail AAA.

Only testing the light theme. Dark mode usually uses a different palette, not a simple inversion, so every pair needs its own check.

What Is Exempt

Logos and brand text are exempt from the contrast requirements. If your logo uses a low-contrast color combination, that is allowed.

Decorative text (text that does not convey information) is exempt. Placeholder text in form fields is not exempt if it conveys information.

Disabled interface components (greyed-out buttons, inactive form fields) are exempt. They still need to be distinguishable from the background, but they do not need to meet 4.5:1.

Text inside a graphic must meet 3:1 contrast against adjacent pixels under Success Criterion 1.4.11 (Non-text Contrast). This is a separate criterion from 1.4.3 but is relevant when text is rendered as part of an image.

A Checklist Before You Ship

• Body text: run every text and background combination through the checker and require 4.5:1 under AA.
• Large text: apply the 3:1 bar only where the type is 24px or larger, or 18.66px or larger in bold.
• Links: confirm link text is distinguishable by more than color alone, per Success Criterion 1.4.1, and that its contrast still passes.
• Controls: check icons, focus indicators, and component boundaries at 3:1 against adjacent colors under 1.4.11.
• Placeholders: treat placeholder text as real text unless it is purely decorative.
• Both themes: test light and dark mode separately, plus every brand variant.
• Worst case: for text over images or gradients, test the region with the lowest contrast.

How to Verify Your Colors

Run every text and background combination through the FontBlend contrast checker. Enter the foreground hex, enter the background hex, and read the verdict. If any combination fails AA normal, fix it before you ship.

The contrast checker also suggests an accessible variant. If your foreground fails, click "suggest accessible" and it will darken or lighten the foreground (whichever direction raises the ratio more) until it passes the target threshold.

Verification is a habit, not a step. Re-run the check whenever a color changes, including in review screenshots and exported tokens. The brand kit builder applies the same formula to every semantic color role before export, so a palette that passes there has been checked once for the whole system.

Common Questions

Is 3:1 enough for buttons? The 3:1 bar covers large text under AA and non-text components under 1.4.11. A button label at a normal size still needs 4.5:1 against the button background, and the button boundary needs 3:1 against the page background.

Do disabled controls need contrast? They are exempt from 1.4.3, but they still have to be perceivable as disabled. A control that vanishes into the background fails its purpose even when the letter of the criterion is satisfied.

Why two thresholds instead of one? Larger glyphs have thicker strokes relative to the gaps between them, so they stay readable at lower contrast. The thresholds exist to avoid punishing large display type with body-text requirements, and to keep body text out of the danger zone.

Related Tools

The contrast checker computes exact WCAG 2.2 ratios. The color palette generator includes contrast checks on every palette. The brand kit builder runs contrast checks on all semantic color roles before export.