WCAG Color Contrast Requirements: AA, AAA and 2.2 Explained

What Is Color Contrast in Web Design?

Color contrast describes how much the perceived lightness of text (or icons treated as text) differs from the lightness of the background behind it. WCAG expresses this as a ratio between two numbers: higher means more separation. The specification does not care whether your aesthetic is minimal or maximal; it encodes a simple idea: if two colors are too close in luminance, many people cannot read them reliably. That includes people with low vision, cataracts, or age-related acuity loss, but it also includes situational limitations such as bright sunlight on a phone screen, cheap office monitors with crushed shadows, or tired eyes at the end of a workday. Screen reader users are not the primary audience for contrast rules; visual readability is. When contrast is insufficient, content may still be programmatically available yet practically unusable for a large portion of your audience.

Designers often think in hue and saturation first. WCAG instead starts from relative luminance, a single scalar derived from the sRGB color channels after linearization. Two colors can look “different” on the color wheel yet sit at nearly the same luminance (think yellow on white or mid-gray on light gray), producing a ratio far below 3:1. Conversely, two colors that feel subdued, such as navy on off-white, can exceed 7:1. The ratio therefore rewards perceptual separation along the brightness axis more than colorfulness. That is why accessibility conversations keep returning to the same advice: darken the text, lighten the background, or introduce a scrim behind text on busy imagery.

In product teams, contrast is a shared responsibility. Brand designers pick tokens; engineers implement states; content designers place text on marketing imagery. A shared vocabulary (AA, AAA, large text, non-text contrast) reduces rework late in QA. The sections below translate those terms into numbers you can verify before merge.

Why Contrast Ratio Matters for Accessibility

Contrast is one of the most frequently cited issues in accessibility enforcement and litigation because it is objectively measurable and visibly obvious to judges and juries. In the United States, the Americans with Disabilities Act (ADA) has been interpreted by courts to cover digital services for many businesses, and private plaintiffs frequently reference WCAG 2.1 Level AA as a practical benchmark. Federal agencies align with Section 508 Refresh requirements that map to WCAG. In Europe, the European Accessibility Act and related standards push vendors toward WCAG-compatible outcomes for consumer products and services. None of these laws replace WCAG line by line in every jurisdiction, but conformance with WCAG 2.x AA contrast thresholds is the de facto risk reduction strategy for multinational teams.

The scale of visual disability is large enough that low contrast silently shrinks your addressable audience. WHO and national surveys routinely report hundreds of millions of people with moderate or severe distance vision impairment; many more have uncorrected refractive error or presbyopia. If your body copy sits at 2.8:1 because gray looked stylish, you did not exclude a tiny edge case; you frustrated a mainstream segment. Good contrast also supports cognitive accessibility: when shapes and glyphs separate clearly from their backgrounds, reading speed improves for dyslexic readers and for anyone scanning dense dashboards.

From a product metrics angle, accessible contrast tends to correlate with better task completion in bright environments and on low-end hardware. It is also resilient: when users enable dark mode, system high-contrast themes, or color filters, designs that already respected luminance degrade more gracefully than ultra-light palettes built on borderline ratios.

WCAG 2.2 AA Requirements

WCAG 2.2 continues the text contrast requirements from WCAG 2.1. Success criterion 1.4.3 Contrast (Minimum) is the AA rule most teams must meet. For normal text, you need a contrast ratio of at least 4.5:1 between the text color and the adjacent background color (including behind inline links and placeholder text when it is visible). For large-scale text, the minimum drops to 3:1 because larger glyphs are legible at slightly lower separation. AA is widely treated as the contractual baseline in procurement and in third-party audit reports.

AA is not “average accessibility”; it is the floor that removes the worst barriers for text readability. If your component library documents a “text secondary” token, that token still has to land at or above 4.5:1 on its intended surfaces, or you must restrict it to large text only, or pair it with a different background token. AA also interacts with anti-aliasing and font weight: very thin weights at small sizes can look softer than the underlying math predicts, so teams often add a small safety margin above 4.5:1 for 14px UI labels.

Remember that 1.4.3 is not the only AA requirement touching color. 1.4.11 Non-text Contrast requires a 3:1 contrast for essential parts of UI components and certain graphics, separate from the text rules. If your icon is only distinguishable because its stroke is 1.8:1 against the card, it fails non-text contrast even when the adjacent label passes 1.4.3.

WCAG 2.2 AAA Requirements

Success criterion 1.4.6 Contrast (Enhanced) defines the AAA text thresholds. Normal text must meet at least 7:1. Large-scale text must meet at least 4.5:1. These steps are materially stricter than AA; many brand palettes cannot hit 7:1 for body copy without moving toward near-black ink colors. That is acceptable; WCAG never requires every string on a site to be AAA, but teams choose AAA selectively for mission-critical reading experiences, health content, or when policy mandates enhanced conformance.

AAA is often misunderstood as “three A’s means perfect.” In reality, AAA is a scoped set of criteria; full AAA conformance for an entire product is rare because other criteria (such as line length or timing) may be impractical site-wide. For contrast specifically, AAA is a worthwhile target for long-form articles, documentation, and data tables where users cannot choose a larger font. Marketing hero headlines that already qualify as large-scale text may reach 4.5:1 with less drama than body copy reaches 7:1.

When communicating with legal stakeholders, clarify that AA is the typical compliance claim, while AAA is an explicit enhancement you can evidence on subsets of screens. Auditors document both the ratio and the element role (text vs large-scale text) so engineering tickets stay actionable.

Normal Text vs Large Text in WCAG

WCAG defines large-scale text using CSS px with an assumed reference pixel. Text is large-scale when it is at least 18 point (typically 24px) at normal weight, or at least 14 point (typically 18.67px, often rounded to 19px) when bold, meaning a computed font-weight of 700 or heavier in CSS terms. Anything smaller or lighter counts as normal text and must meet the stricter thresholds (4.5:1 for AA, 7:1 for AAA). This definition is intentional: big display headings and hero statements are easier to parse even when contrast is slightly lower.

A common misconception is that any heading tag qualifies as large text. The HTML level (h1 vs h3) is irrelevant; only the rendered font size and weight matter. Another misconception is that tracking or uppercase transforms change the threshold; they do not alter the definition, though tight letter spacing can still hurt readability and should be tested with real content. If designers use rem units tied to user preferences, remember that when users scale text up, their effective size may cross into large-scale territory, potentially saving a borderline ratio, or exposing a failure if only the container grew.

In Figma, mirror WCAG intent by annotating components with the intended production font size and weight, not only the artboard preview. Handoff gaps where devtools show 13px regular labels against #AAAAAA are a frequent source of 3.8:1 surprises in production.

How to Calculate Contrast Ratio

WCAG uses sRGB, linearizes each channel, combines them into relative luminance L, then computes (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 the darker. Intuitively, you are comparing two brightness values on a curve that matches human sensitivity to green more than blue. You rarely hand-calculate in practice, but understanding the steps explains why two blues with different hex values can land on the same ratio if their luminance collapses, and why increasing font size cannot fix a color math failure.

Worked example in plain language: medium gray #999999 on white #FFFFFF produces roughly a 2.85:1 ratio, failing AA for normal text. Nudging to #767676 on the same white lands near 4.54:1, clearing 4.5:1 for AA normal text with a tiny margin. Another example: light blue #87CEEB on white is often around 1.6:1 for thin UI type: beautiful in swatches, unusable for labels. Darkening the blue toward a mid-navy or placing the text on a tinted panel behind it fixes the luminance gap faster than desaturating alone.

To verify combinations quickly, use the free A11y Smart Color Contrast Checker on the homepage: enter foreground and background, read the ratio, and iterate suggestions until AA or AAA goals are met. The same thresholds apply whether you author in CSS, native mobile themes, or canvas-based exports.

Common Contrast Failures and How to Fix Them

Gray body text on white. Hex #999999 on #FFFFFF sits near 2.85:1, far below the 4.5:1 AA requirement. Replace with at least #767676 for normal text, or move to a darker neutral token in your system. If the palette resists, increase weight to bold and size to large-scale, but only when the layout truly meets the 14pt bold / 18pt definitions.

Light blue links on white. Aromatic “brand blues” near #6EC5FF on white can land near 1.8:1. Underline the link, darken the resting color to a mid-blue with luminance under ~0.35, and reserve the bright hue for hover accents on darker surfaces. If marketing insists on the light blue, place links on a soft blue panel whose combined perceived background still yields 4.5:1 after compositing.

White text on light green. A pastel success banner such as #FFFFFF on #C8F5CE may measure near 1.4:1. Darken the background to a forest-adjacent green or switch the text to a deep green-gray. For status chips, prefer a dark glyph on a light surface rather than white on neon unless the neon is deliberately darkened.

Each fix follows the same recipe: measure, compare to 4.5:1 / 3:1 / 7:1 / 4.5:1 thresholds based on text class, then adjust luminance first. Hue shifts come second once you are safely above the line.

Frequently Asked Questions

Ready to check your colors? Use the free A11y Smart Color Contrast Checker to test any color combination against WCAG 2.2 AA and AAA standards instantly. Continue designing in Figma with the Figma plugin install link, and read about the project and author for background on how the tool is maintained.