Color contrast under WCAG: requirements and accessibility testing

Text and interactive element contrast is one of the basic accessibility criteria. WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios for different conformance levels. This article covers the requirements, calculation formulas, and testing methods.

WCAG levels

Large text is at least 18px at regular weight or 14px at bold weight.

Contrast ratio formula

The contrast ratio is calculated using relative luminance:

(L1 + 0.05) / (L2 + 0.05)

where L1 is the luminance of the lighter color and L2 is that of the darker color. The result ranges from 1:1 (no contrast) to 21:1 (black on white).

Color combination examples

Checking contrast

Manual calculation

Use the relative luminance formula. For sRGB:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

where R, G, and B are the linear channel values (gamma correction is applied to each channel).

Tools

The Color Contrast service on rechecker.ru lets you enter colors (HEX, RGB, HSL) and get the contrast ratio, along with WCAG recommendations.

To convert between color formats, use Color Converter.

Requirements for interactive elements

Buttons, links, and form elements must have a contrast ratio of at least 3:1 against the background. Contrast is also recommended for the :focus and :hover states.

Decorative elements

Elements that convey no information (decorative lines, icons with no semantic meaning) are not subject to contrast requirements. However, if an icon conveys meaning, sufficient contrast is required.

Logos

Contrast requirements do not apply to logos and brand marks. All other text on the page must meet WCAG requirements.

Gradients and complex backgrounds

For a gradient or complex background, identify the most problematic area (the lowest contrast) and test it. If necessary, add a translucent overlay behind the text.

Practical recommendations

1. Check contrast during the design stage, not only during implementation
2. Account for dark mode: color pairs may differ
3. Test on real devices—screen calibration varies
4. Do not rely only on automated checks: visual assessment matters

Contrast and transparency

When semi-transparent text is placed over a background, its effective contrast depends on the background beneath it. Check the final color after compositing. For overlay text on images, darken or blur the background.

Contrast in component libraries

Libraries such as Material UI and Chakra UI set default colors. Check custom themes for WCAG conformance. Overriding colors can reduce contrast.

Further reading

Learn how to create accessible palettes from scratch in How to create an accessible color palette for a website.

Calculating relative luminance

You can use the WCAG formula to check contrast manually. First, convert sRGB to linear values:

R_lin = R <= 0.03928 ? R/12.92 : ((R+0.055)/1.055)^2.4

Do the same for G and B. Then calculate relative luminance:

L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin

The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color.

Text on images

When text is placed over an image, contrast varies across different areas. Options include:

• Add a translucent overlay (dark or light) behind the text
• Add a text shadow for readability
• Blur the background area behind the text (backdrop-filter)

Large text

Text that is 18px or larger (14px bold) may have a contrast ratio of 3:1 for AA conformance. This does not eliminate the need to check contrast: some users increase the font size in their browser, and contrast may change.

Non-informative images

Decorative images (backgrounds and illustrations with no semantic meaning) are not subject to contrast requirements. However, if an image contains text or important information, sufficient contrast is required.

Logos and brand marks

WCAG exception: logos and brand marks do not require a minimum contrast ratio. The rest of the page content must meet the requirements.

Automated testing

Tools such as axe, WAVE, and Lighthouse check contrast automatically. They do not replace manual testing: automated checks may miss complex cases (gradients, overlays, dynamic content).

Design recommendations

• Choose combinations with a margin: 4.5:1 is the minimum, while 7:1 is more comfortable for many users
• Check contrast during the design stage, before implementation
• Document approved color pairs in your guidelines

Graphics and UI components

WCAG 2.2 clarifies that graphics and UI components must have a contrast ratio of at least 3:1 against adjacent colors. Icons, buttons, checkboxes, and borders are all covered by this requirement. If an icon conveys important information, its contrast must be at least 3:1.

Contrast and age

Contrast sensitivity decreases with age. Users aged 40+ and 60+ have more difficulty distinguishing low-contrast text. The AAA recommendation (7:1) is especially useful for audiences experiencing age-related changes in vision.

Testing tools

In addition to Color Contrast on rechecker.ru, use:

• WebAIM Contrast Checker — enter colors and calculate the ratio
• axe DevTools — a browser extension that checks an entire page
• Lighthouse — the Accessibility tab provides a contrast report

Contrast in print

WCAG requirements are designed for screens. Printed materials are subject to their own standards (for example, ISO 9241), but the principle of sufficient contrast still applies.

Frequently asked questions

Does placeholder text in input fields need to meet contrast requirements? It is recommended. Low-contrast placeholder text is harder to read. Many guidelines recommend a contrast ratio of at least 4.5:1 or at least 3:1.

What should I do if a brand color fails the test? Use it for large elements, backgrounds, or decoration. For text and small elements, choose a contrasting color from the palette or a darker/lighter variation.

How do I check contrast in Figma? The Contrast and Stark plugins let you check contrast between selected layers. Integrate testing into the design process.

Contrast on mobile devices

On mobile screens, brightness and viewing angle affect how contrast is perceived. Outdoors in bright sunlight, low-contrast text becomes unreadable. A contrast margin is recommended for the mobile version.

CI/CD integration

Add contrast testing to your pipeline using axe-core, pa11y, or Lighthouse in headless mode. Failing the build when contrast requirements are violated prevents regressions.

Focus contrast

Elements in the :focus state must be visible. The focus outline must have a contrast ratio of at least 3:1 against the background. Do not remove the outline without replacing it with a visible alternative.

Links and underlining

Links that differ from the main text only by color must have a contrast ratio of 4.5:1 against the background. Underlining provides an additional cue and meets the “not only color” criterion.