How to Test Color Contrast for Accessibility (WCAG 2.2 Explained)

Color contrast is the most-measured accessibility metric on the web. It is also one of the few that is fully objective: given two colors, there is a single number (the contrast ratio) that tells you whether the combination is readable for people with low vision. WCAG 2.2 defines the thresholds; the formula is well-known and implemented in every contrast checker. This guide covers the formula, the thresholds, and how to use the result.

What the contrast ratio means

The contrast ratio is a number between 1 and 21. It is the ratio of the luminance of the lighter color to the luminance of the darker color.

• 1:1 — no contrast (e.g. white on white)
• 4.5:1 — the minimum for body text (WCAG 2.2 AA)
• 7:1 — the minimum for body text at the stricter AAA level
• 21:1 — maximum contrast (black on white)

A higher ratio means more contrast. The threshold of 4.5:1 was chosen because research showed that people with normal vision (or corrected vision) could read text at that contrast in most lighting conditions, and people with mild low vision could read it with effort.

The WCAG 2.2 contrast formula

WCAG defines a precise formula. Given two colors in sRGB (each channel 0-255):

1. Normalize each channel to 0-1: c = channel / 255.
2. Apply gamma correction: if c <= 0.03928, use c / 12.92; otherwise use ((c + 0.055) / 1.055) ^ 2.4.
3. Compute relative luminance: L = 0.2126 * R + 0.7152 * G + 0.0722 * B
4. Contrast ratio: (L_lighter + 0.05) / (L_darker + 0.05), where L_lighter is the higher of the two luminances.

The luminance formula weights the green channel the most (0.7152) because the human eye is most sensitive to green. The blue channel is weighted the least (0.0722). This matches perceived brightness — a saturated red and a saturated green at the same "value" do not look equally bright.

The thresholds

WCAG 2.2 (and the older 2.1 and 2.0) define three levels:

AA — the legal baseline

AA is the standard for most sites. Many countries' accessibility laws (including the ADA in the US and the EAA in the EU) require AA. The thresholds:

• 4.5:1 for body text (under 18pt regular or 14pt bold)
• 3:1 for large text (18pt+ regular or 14pt+ bold)
• 3:1 for UI components and graphical objects (icons, form borders, focus rings)

AAA — the gold standard

AAA is stricter, intended for sites that want the highest accessibility. Few sites meet AAA across the board. The thresholds:

• 7:1 for body text
• 4.5:1 for large text

AAA does not define thresholds for UI components. The 3:1 AA threshold applies.

What "large text" means

WCAG defines large text as 18 point (24px) or 14 point bold (18.66px). At that size, the eye reads by shape rather than letter-by-letter, so the contrast requirement is lower.

Headlines, hero text, and section titles usually qualify as large text. Body copy, captions, and small UI labels do not. If in doubt, use 4.5:1 — the stricter standard works everywhere.

What fails and what does not

Some color combinations that designers think are fine fail AA. The most common failures:

• Light grey on white — #999 on #fff is 2.85:1. Fails AA. Common with "subtle" placeholder text and disabled states.
• Saturated colors on white — bright blue #007BFF on white is 4.04:1. Fails AA body text. The link blue that Bootstrap popularized.
• Pastel on pastel — light pink on light blue is often 1.5:1. Fails everything.
• Brand colors on white — many corporate brand colors fail AA. Especially true for pastel or muted brand palettes.

What passes AA easily:

• Black on white (21:1)
• Dark grey on white (e.g. #333 on #fff is 12.6:1)
• White on dark blue (e.g. #fff on #1E3A8A is 9.4:1)
• Most fully-saturated primary colors when paired with their natural complement (e.g. #000 on #FF0 is 19.5:1)

How to fix a failing combination

The fix is almost always to darken the text or lighten the background. The contrast formula is asymmetric — it is much easier to make a text darker than to make a background lighter, because going darker reduces L_dark while going lighter only marginally reduces L_lighter. A few rules of thumb:

• For body text on a white background, use a text color of #595959 or darker. #767676 is the minimum for AA at 4.54:1.
• For links, use a saturated blue of #0066CC or darker. #0066CC on white is 5.92:1. Lighter link blues fail.
• For light-grey placeholder text, use at least #767676. The convention of #999 is below threshold.

Test in context, not in isolation

The contrast ratio is a property of two colors, not of a "color palette". A color that fails against white might pass against dark blue. A text color that fails on the body might pass on the sidebar. Test every actual text/background combination in your design — every paragraph, every link, every button, every input field, every status badge.

The Uttir Contrast Checker takes any two colors (HEX, RGB, or HSL) and computes the ratio. It shows AA and AAA pass/fail and previews the text in both colors. Run every combination in your design system through it before shipping.

Beyond contrast: other accessibility factors

Contrast is necessary but not sufficient. A site can pass all contrast checks and still be inaccessible. The other factors:

• Color is not the only signal — never convey information by color alone. A red required field needs a label, an icon, or an asterisk, not just red.
• Text size — WCAG recommends 16px minimum for body text, 14px for small text. The default browser size is 16px.
• Line height — 1.5x line height is the recommendation for body text. Tighter lines hurt readability.
• Line length — 50-75 characters per line is the recommendation. Wider lines hurt readability.
• Keyboard navigation — every interactive element must be reachable and operable by keyboard, with a visible focus ring (3:1 contrast minimum).
• Screen reader support — semantic HTML, ARIA labels where needed, alt text on images.

Contrast is the easiest accessibility win. It is a number, it is objective, and it is a one-time fix. The other factors require ongoing attention.

Automated tools

Most CI pipelines can check contrast automatically. Tools:

• axe-core — the standard automated accessibility testing library. Fails the build on AA violations. Available as a browser extension, a Node module, and integrated into most testing frameworks.
• Lighthouse — Chrome's built-in audit tool. Includes contrast checks.
• Pa11y — command-line accessibility tester. Runs against any URL.

None of these catch everything. The best practice: run automated tests in CI, then do manual testing with a screen reader and with a keyboard. The combination catches ~95% of issues.

What to do when a brand color fails

This comes up constantly. The brand color is, say, a specific teal, and it fails AA against white. The options:

1. Darken the brand color for text use. Keep the light version for backgrounds and large surfaces; use a darker version (often 30-40% darker) for text and icons. Most brand guidelines already include "primary" and "secondary" shades — use them appropriately.
2. Use the brand color as an accent, not as body text. The brand teal can be the link color (with a darken) or the icon color, while the body text uses a near-black grey.
3. Change the brand color. Last resort, but sometimes the right call. If the brand teal is unreadable across the site, the brand color is the problem, not the WCAG threshold.

Bottom line

Color contrast is the most-measured accessibility metric on the web. The formula is well-defined; the thresholds are well-defined. Test every text/background combination in your design with the Uttir Contrast Checker before shipping. Aim for AA (4.5:1 for body, 3:1 for large). Use a CI tool to catch regressions. Make contrast a part of your design system, not an afterthought.