Color Contrast and Accessibility: Where the WCAG Formula Comes From, Its Limits, and the Law

Light gray body text looks elegant in a design mockup on a calibrated monitor. The same page viewed on a phone in sunlight, on a laptop dimmed to save battery, or by someone in their seventies is a different experience. Contrast is not a niche accommodation; it decides how fast and how accurately everyone reads when conditions are less than ideal.

This article covers where the contrast rules came from, how far the numbers can be trusted, what the law in several major markets actually requires, and where real palettes tend to fail. To run the numbers on your own colors, use the color contrast checker.

Who struggles when contrast is low

Low-vision users are the obvious group, but the affected population is much wider.

• Aging eyes. The lens yellows and scatters light, and the pupil shrinks, so less light reaches the retina. People who still score well on an acuity chart lose contrast sensitivity, and pale gray text is the first thing to become hard work.
• Bad viewing conditions. Glare outdoors, screens dimmed by power-saving modes, and cheap panels with limited native contrast all compress whatever contrast the design had. The 0.05 constant in the WCAG formula exists precisely to model this kind of ambient flare.
• Color vision deficiency. Around 8% of men and 0.5% of women of Northern European ancestry have red-green color vision deficiency; reported rates for East Asian men are lower, roughly 4 to 7%. That is one or two boys in a typical class. They perceive lightness contrast normally but miss information carried only by hue.

A contrast threshold is a single number standing in for the question “will this still be readable when things are not perfect?”

Where 4.5:1 comes from

When WCAG 2.0 set its contrast rules in 2008, the starting point was the computer screen rather than print. The formula undoes the sRGB gamma curve to estimate the amount of light each color emits (relative luminance) and compares the two. W3C’s Understanding document gives the reasoning:

1. ISO 9241-3, the ergonomic standard for office displays, recommended a minimum luminance contrast of 3:1 for people with normal vision.
2. A person with 20/40 acuity is assumed to lose contrast sensitivity by about a factor of 1.5, so 3 × 1.5 = 4.5 became the AA threshold for body text. 20/40 is close to the driving-license vision standard in many jurisdictions and is common in older adults.
3. Allowing for roughly 20/80 vision gives the AAA level of 7:1.
4. Large text has thicker strokes and stays legible at lower contrast, so text of at least 18 point, or 14 point bold, gets the next step down: 3:1 for AA.

WCAG 2.1 (2018) added success criterion 1.4.11, which asks for 3:1 on non-text elements needed to understand the interface: input borders, meaningful icons, focus indicators. The classic failure is a text field drawn as a pale gray outline on white.

Keep in mind that these numbers were not each validated by large reading studies. They are an agreed threshold assembled from an existing standard and visual-acuity data. There is no cliff in real-world legibility between 4.49 and 4.51. Audits still treat thresholds as absolute and do not round, so 4.49:1 fails.

The criticisms, and what APCA is

The WCAG 2 formula has survived for nearly two decades because it is simple, but its weaknesses are well documented.

• It ignores polarity. Gray on white and white on the same gray score identically, although light text on dark backgrounds is perceived differently, with more apparent bleed.
• It overrates dark pairs. Muddy combinations such as dark gray on navy can pass, while clearly legible ones such as white on a saturated orange often fail.
• It treats type size and weight in two coarse buckets. A 300-weight 16px web font and a 700-weight 16px font face the same requirement.

The Accessible Perceptual Contrast Algorithm (APCA), developed by Andrew Somers, is an attempt to fix this. It is based on a perceptual model, treats dark-on-light and light-on-dark differently, and reads its output (an Lc value) against a lookup table of font sizes and weights.

Here is the common misunderstanding: many blog posts say “WCAG 3 uses APCA”. It does not. APCA appeared as exploratory content in early WCAG 3 drafts but was removed from the July 2023 working draft, and the current WCAG 3 draft states that the contrast algorithm is yet to be determined. WCAG 3 itself is still a working draft and is widely expected to be years from becoming a Recommendation. For any legal or contractual question today, the benchmark is WCAG 2.x. APCA is best used during design as a second opinion on whether a pair that passes the old formula is actually comfortable to read.

What the law requires in four markets

Almost every regulation borrows its contrast numbers directly from WCAG. The differences lie in who is obliged to comply.

South Korea

The Act on the Prohibition of Discrimination against Persons with Disabilities bars discrimination in access to information through websites. The technical benchmark is the Korean Web Content Accessibility Guidelines (KWCAG) 2.2, published as KS X OT0003:2022 and revised in December 2022. It has 4 principles, 14 guidelines and 33 checkpoints. The contrast checkpoint requires “a contrast ratio of at least 4.5 to 1 between text content and background”, allowing 3:1 for large text (18pt, or 14pt bold) and for content that can be enlarged. That is effectively WCAG 2.x AA. Public-sector accessibility certification marks are audited against it.

Japan

The technical standard is JIS X 8341-3:2016, revised to be identical in content to WCAG 2.0, which had become the international standard ISO/IEC 40500:2012. Its contrast rules are therefore WCAG 2.0 AA. The Ministry of Internal Affairs and Communications’ operational guidelines for public websites ask national and local government bodies to target AA conformance and to test and publish results regularly. Separately, an amendment to the Act for Eliminating Discrimination against Persons with Disabilities took effect in April 2024, making “reasonable accommodation” mandatory for private businesses as well. That does not by itself make JIS conformance a legal duty for every private website; web accessibility is treated as advance environmental improvement, which businesses are required to make efforts toward.

European Union

The European Accessibility Act (Directive 2019/882) began applying on 28 June 2025. It covers consumer-facing products and services including e-commerce, banking, e-books and passenger transport services, with an exemption for services provided by microenterprises (fewer than 10 employees and annual turnover or balance sheet of no more than EUR 2 million). The harmonized standard used to presume conformity is EN 301 549, whose web clauses incorporate WCAG 2.1 AA. Public-sector websites were already covered by the earlier Web Accessibility Directive (2016/2102).

United States

Federal agencies are bound by Section 508 of the Rehabilitation Act; the refreshed 508 Standards of 2017 incorporate WCAG 2.0 AA. For state and local governments, the Department of Justice published a final rule under ADA Title II in April 2024 adopting WCAG 2.1 AA. The original compliance dates were April 2026 for entities serving populations of 50,000 or more and April 2027 for smaller ones; an interim final rule in April 2026 pushed them back a year, to April 2027 and April 2028. Private businesses under Title III have no specific web technical standard in regulation yet, but WCAG is the yardstick courts and settlements routinely reach for.

The practical takeaway: in any of these markets, meeting 4.5:1 for body text and 3:1 for large text and UI components keeps you clear on contrast.

Where real palettes fail

Knowing the rule and holding to it across a product are different skills. These are the places audits keep finding problems.

Brand colors used as button fills. Bright green, orange and sky-blue brand colors rarely reach 4.5:1 with white text. You have three options: switch the label to a dark color, define a darker “brand-strong” variant for interactive fills, or make the label large (bold at 18.5px or more) so 3:1 applies. The contrast checker suggests the nearest passing shade while keeping hue and saturation fixed, which is usually the variant designers accept.

Secondary text and placeholders. Timestamps, captions and placeholder hints tend to be lightened because they are “less important”, but the criterion has no such exception. On white, the lightest passing gray is around #767676. Anything paler needs larger type.

States. Hover, focus, selected and error states each create a new color pair, and each must be checked. Focus rings in particular need 3:1 against the adjacent background under 1.4.11. Disabled controls are exempt; active controls that merely look disabled are not.

Dark mode. Inverting a light palette is not enough. Pure white on pure black (21:1) draws complaints about halation, so many design systems use a dark gray surface such as #121212 and slightly dimmed white text. That still clears 4.5:1 comfortably. The more common failure is saturated accent colors that looked fine on white and lose contrast on a dark surface.

Text over images. Measure against the lightest (or darkest) part of the photo behind the letters, not the average. A semi-transparent dark overlay fixes most hero banners. To see the actual composited color, take a screenshot and sample the pixels behind the text with the color picker.

Color as the only signal. A chart legend that separates series only by red and green, or a required field marked only by a red border, fails WCAG 1.4.1 regardless of contrast ratio. Add icons, text labels or line styles.

Managing it with design tokens

Fixing contrast screen by screen does not last; the next feature reintroduces the problem. The durable fix is to validate combinations at the token level.

1. Separate background tokens (surface, surface-muted, brand) from foreground tokens (text, text-muted, on-brand).
2. Build a matrix of permitted pairs and record the ratio in each cell. Mark anything under 4.5 as “large text only” or “do not use”.
3. Build lightness steps in a perceptually uniform space such as OKLCH rather than HSL. HSL lightness 50% is a very different perceived brightness for yellow and for blue, so HSL-based scales produce uneven contrast across hues. The color converter can move values between these spaces.

With that matrix in place, engineers building a new component look up a cell instead of recalculating contrast each time.

Common misconceptions

• “We should aim for AAA everywhere.” W3C itself does not recommend AAA as a general policy for entire sites; 7:1 body text severely limits a visual identity. Regulations require AA.
• “The automated checker passed, so we are done.” Automated tools read declared CSS colors. They routinely miss text in images, text over gradients and hover states.
• “High contrast means color-blind users are fine.” Contrast ratio measures text against background. Whether two data colors can be told apart from each other is a separate check.
• “APCA is the new standard.” As covered above, it is not part of any finalized standard.

The contrast threshold is not a complete model of legibility. It is a shared floor that everyone measures the same way. Once you are above it, reading the page on a real phone, in bright light and in dim light, is still the best test there is.