Probeo
probeo
Menu

Fix Insufficient Color Contrast for WCAG Compliance

Color contrast below WCAG thresholds makes text unreadable for users with low vision. This page explains contrast ratio requirements, the difference between AA and AAA compliance, and how to measure and correct contrast violations.

Last updated 02/08/2026

Color contrast measures the luminance difference between foreground text and its background. WCAG 2.1 defines minimum contrast ratios: 4.5:1 for normal text and 3:1 for large text at the AA level. When contrast falls below these thresholds, text becomes functionally invisible to users with low vision, color deficiencies, or anyone reading in suboptimal lighting. This is not an edge case. Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Insufficient contrast is one of the most frequently detected accessibility violations across the web.

What's wrong

Text on the page does not meet the minimum contrast ratio required by WCAG 2.1 Success Criterion 1.4.3. The contrast ratio between foreground and background colors falls below 4.5:1 for normal-sized text or below 3:1 for large text. Large text is defined as 18pt (24px) regular weight or 14pt (18.67px) bold weight. Below these thresholds, characters lose definition against the background. The text is present in the DOM and technically readable by assistive technology, but visually degraded for sighted users who depend on sufficient luminance differentiation.

Why it matters

Contrast ratio is a computed value derived from the relative luminance of two colors, expressed as a ratio from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). WCAG defines two conformance levels. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Most organizations target AA as the operational baseline because AAA constrains the color palette significantly. Insufficient contrast compounds with other factors: screen glare, low-brightness settings, aging displays, and presbyopia. A ratio that feels readable on a calibrated monitor in a dark room may be illegible on a phone in sunlight. The specification accounts for these conditions. Meeting the ratio is not a design preference — it is the threshold below which text stops functioning as communication for a measurable portion of users.

The correct change

Adjust either the foreground color, the background color, or both until the contrast ratio meets or exceeds 4.5:1 for normal text and 3:1 for large text. Use a contrast checker that computes relative luminance per the WCAG algorithm — not a visual estimate. The formula uses linearized sRGB values, not the hex values directly. Small shifts in hue or lightness can move a ratio from 4.2:1 to 4.6:1 without altering the design language. Non-text UI components — borders, icons, focus indicators, form controls — require a minimum 3:1 contrast ratio against adjacent colors under WCAG 2.1 Success Criterion 1.4.11. This applies to any visual element a user must perceive to understand or operate the interface.

Scope

This violation applies at the page level. Each page is evaluated independently because contrast depends on the specific color combinations rendered. Template-level fixes resolve most instances when colors are defined in a design system or CSS variables, but overrides, inline styles, and dynamically generated colors can reintroduce violations on individual pages. Background images and gradients behind text require additional evaluation since the effective background color varies by position.

How to verify

  • Validation confirms the condition is resolved:
  • • All text elements meet a minimum 4.5:1 contrast ratio against their computed background
  • • Large text (18pt regular or 14pt bold and above) meets a minimum 3:1 ratio
  • • Non-text UI components meet 3:1 against adjacent colors
  • • Automated accessibility scanners report zero color-contrast violations
  • • Manual spot checks confirm readability on low-brightness and high-glare displays
  • • Focus indicators are visible with at least 3:1 contrast against surrounding content

Takeaway

  • WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text (18pt or 14pt bold)
  • WCAG AAA raises the bar to 7:1 for normal text and 4.5:1 for large text
  • Non-text UI components require 3:1 contrast under Success Criterion 1.4.11
  • Contrast ratio is computed from relative luminance, not perceived brightness
  • Meeting the threshold accounts for screen variability, lighting, and vision differences

FAQ

Are disabled form elements exempt from contrast requirements?
Yes. WCAG explicitly exempts inactive UI components from contrast requirements. A disabled button or input that cannot receive interaction is not required to meet the 4.5:1 or 3:1 thresholds. However, if the disabled state conveys information the user needs — such as which options are unavailable — consider providing that information through means other than color alone.
Does placeholder text need to meet contrast requirements?
Placeholder text is not exempt. If placeholder text serves as a visible label or provides instructions users need to complete a form, it must meet contrast requirements. The common pattern of light gray placeholder text on a white background frequently fails. If placeholder text is purely decorative and the field has a separate visible label, the violation is less impactful but still flagged by automated tools.
Are logos and brand wordmarks required to meet contrast ratios?
No. Logotypes and text that is part of a logo or brand name are explicitly exempted by WCAG. There is no contrast requirement for text within logos. This exemption exists because logos have fixed visual identities. It does not extend to other branded text such as taglines, navigation labels using brand colors, or body copy styled with brand palette colors.
What contrast ratio do focus indicators need?
Focus indicators require 3:1 contrast against adjacent colors under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast). WCAG 2.2 adds Success Criterion 2.4.13 (Focus Appearance), which specifies that focus indicators must have a minimum area and 3:1 contrast between the focused and unfocused states. Removing or hiding focus outlines via CSS creates a separate violation entirely.
How is contrast calculated for text over background images or gradients?
Automated tools typically evaluate the contrast between the text color and the computed background color at the element's position. For background images, the effective contrast depends on which part of the image sits behind the text. A common remediation is placing a semi-transparent overlay between the image and text to guarantee a minimum contrast regardless of image content. Gradients require evaluating contrast at the lowest-contrast point in the text's bounding area.
Does dark mode need separate contrast validation?
Yes. Each color scheme is an independent set of foreground-background pairings. A design system that passes contrast checks in light mode may fail in dark mode if the dark palette was not evaluated with the same rigor. Both modes must independently meet WCAG thresholds. Automated scans should run against each rendered mode separately.