How is the contrast ratio calculated? WCAG

Short answer

The web accessibility guidelines WCAG calculate a ratio from the relative luminance of two colors to compare text against its background: the result is a number between 1:1 and 21:1, and normal text requires at least 4.5:1. Because orange and white are both bright colors, the luminance difference between them is small, so white text on orange often falls below the threshold. The formula is widespread and practical, but it is criticized for not always measuring perception accurately, and the method that should replace it is still under debate.

Relative luminance: a color becomes a number

The first step in the WCAG contrast calculation is reducing every color to a single number. A color on screen is defined by three channel values — red, green, and blue; pure orange, for instance, written in hexadecimal as #FF8C00, carries the highest value in red, a medium value in green, and zero in blue.

WCAG first scales these values to between 0 and 1, then reverses the screen's tone curve to convert them into "linear" values proportional to the amount of light. Screens encode values with a non-linear curve; the detail of that curve is the subject of EK-05. Once converted to linear values, the three channels are summed with weights: red at 0.2126, green at 0.7152, blue at 0.0722.

The weights aren't arbitrary: daytime vision is tuned to the middle of the spectrum, and that band, where cone responses overlap, is perceived as far brighter than red or blue at the same energy, as BI-09 explains. That's why the green channel carries about 72 percent of the luminance, while blue carries only 7 percent. Even though pure blue (#0000FF) looks very saturated and strong, its relative luminance is only 0.07; pure orange's (#FF8C00) relative luminance, by contrast, is about 0.40.

There's also a small correction in WCAG's own text: the threshold value in the linearization step was written as 0.03928, taken from an older document, until May 2021; now it uses 0.04045 from the sRGB standard. In practice the result barely changes, but it's a reminder that a formula is also a text that gets corrected.

The contrast ratio formula

Once the relative luminance of both colors is found, the ratio is calculated like this: 0.05 is added to the lighter color's luminance, 0.05 is added to the darker color's luminance, and the first is divided by the second. The 0.05 added represents the ambient light and glare hitting the screen surface; it also keeps the ratio from going to infinity at black's zero luminance.

When white's luminance is 1 and black's is 0, the result comes out to (1 + 0.05) / (0 + 0.05) = 21; this is the highest ratio achievable. Two identical colors always give 1:1. An important property of the formula is that it doesn't care which color is the text and which is the background: black text on white and white text on black get the same ratio.

AA and AAA: two levels, two thresholds

WCAG's success criteria are split into levels. Two levels matter for contrast. Level AA is the baseline that most organizations and legal regulations build on: normal text must be at least 4.5:1, large text at least 3:1. Level AAA is stricter: 7:1 for normal text, 4.5:1 for large text.

These numbers have a rationale. According to the guidelines' explanatory document, the 4.5:1 ratio aims to compensate for the contrast sensitivity loss typically experienced at vision loss equivalent to roughly 20/40 acuity; 7:1 was chosen for roughly 20/80 vision loss. In other words, the thresholds target text a reader with reduced vision can read, not text a perfectly sighted designer reads comfortably.

The thresholds are hard limits. On a white background, the gray #777777 gives 4.48:1 and fails the test for normal text; one shade darker, #767676, gives 4.54:1 and passes. The eye can barely tell these two grays apart, but the test does.

Large text and interface elements

Because large letters are easier to read, WCAG grants them a lower threshold. Large text is at least 18 point, or at least 14 point bold; according to the explanatory document, that's roughly 24 pixels in CSS, and roughly 18.5 pixels for bold. Headings at these sizes can get by with 3:1 at level AA.

There's a separate criterion for non-text elements. A button's edge, a form field's border, a checkbox's mark, or a meaningful line in a chart must carry at least 3:1 contrast against adjacent colors. Form fields with a very light gray border are the elements that most often fail this criterion on a white background; the user can't see where the field begins.

Criticisms of the formula and new proposals

The WCAG 2 formula is used worldwide because it's simple, repeatable, and can be built into any browser tool. But designers and perception researchers have long said that the formula sometimes contradicts what the eye actually sees.

The question on the lesson card is the best-known example of this. White text on pure orange (#FF8C00) has a ratio of 2.33:1; it doesn't even meet the lowest threshold of 3:1. Black text on the same orange, though, gives 9.00:1 and clears even the AAA level. By the formula, black text wins by a wide margin. Yet many designers and users, especially in large, bold type, find white on orange readable and black heavy and dirty-looking. Darkening the orange also works: white on #E65100 rises to 3.79:1, and on #C2410C to 5.18:1.

Some of the criticism targets the formula's structure. The formula treats text and background symmetrically, yet dark text on a light background and light text on a dark background aren't perceived the same way; this difference becomes obvious in dark themes. The formula accounts for font size and weight with only two coarse steps. It also tends to overstate contrast for pairs of dark colors.

In response to these criticisms, a method called APCA was developed, led by Andrew Somers. APCA treats text and background separately, gives its result as a value that also shows direction, and varies the threshold by font size and weight. It was a candidate for WCAG's next version for a long time; but the W3C's WCAG 3 working draft doesn't name a specific method. The draft dated September 10, 2026 writes the text contrast requirement as "a contrast measure to be determined," and notes that the algorithm to be used hasn't been decided yet, though this draft assumes it will include a size-weight factor.

Given this, the practical advice is clear: today's standard in force is WCAG 2.2, and legal or organizational requirements are audited against it. Knowing the formula's blind spots lets you notice designs that pass the test yet remain unreadable, or that miss the test by a hair while actually reading well.

Example — a headline over a photo

A news site writes white headlines over its interview photos. Sometimes a person's face or neck falls where the headline sits in the photo. Skin becomes the background color for this design and directly determines the contrast.

Calculated with sample skin tones, the table is striking. On a very light, pinkish skin tone (#F1C7A9), white text's ratio is only 1.56:1. On a medium-warm skin tone (#C68863), the ratio rises to 2.96:1, just below the large-text threshold. On a medium-dark tone (#8D5524) it reaches 6.07:1, and on a very dark tone (#4A2C1D), 12.58:1. The same white headline is readable on one photo and vanishes on another.

The designer's solution isn't to decide based on a single photo. Placing a semi-transparent dark band or gradient behind the headline makes the contrast independent of the person's skin tone in the photo, and guarantees the same readability in every photo.

Common misconception

Summary

1. WCAG calculates each color's relative luminance as the weighted sum of linearized red, green, and blue, and derives a contrast ratio between 1:1 and 21:1 from two luminances.
2. Level AA requires 4.5:1 for normal text and 3:1 for large text and interface elements; level AAA requires 7:1 for normal text, and the thresholds are never rounded.
3. The formula is criticized for treating text and background symmetrically and for being unreliable with dark pairs; proposals like APCA exist, but WCAG 3 hasn't chosen a method yet.

Test yourself

1. (Easy) According to WCAG, what is the highest value the contrast ratio can take, and which pair of colors produces it?
2. (Easy) What is the minimum contrast ratio required for normal text at level AA?
3. (Medium) Why does white text on orange often fail the test?
4. (Medium) Why does the green channel carry the greatest weight in the relative luminance calculation?
5. (Hard) A text has a contrast ratio of 4.499:1. Does it meet level AA, and what does this situation suggest about the formula?
6. (Hard) In the example of a white headline over a photo, what can be done to make the contrast independent of the person's skin tone, and why?

Answers

1. 21:1; it occurs between black and white, because (1 + 0.05) / (0 + 0.05) = 21 ("The contrast ratio formula").
2. 4.5:1; 3:1 is enough for large text ("AA and AAA: two levels, two thresholds").
3. Orange is a bright color despite being saturated; because its relative luminance is close to white's, the ratio between them stays low. White text on pure orange gives 2.33:1 and doesn't even meet 3:1; black text gives 9.00:1 ("Criticisms of the formula and new proposals").
4. Because daytime vision is tuned to the middle of the spectrum, light in that band is perceived as brighter; the green channel carries about 72 percent of perceived luminance ("Relative luminance: a color becomes a number").
5. No, because the thresholds are applied without rounding. This shows that a difference too small for the eye to distinguish can change the test's outcome, and that the thresholds turn a smooth perceptual transition into a sharp line ("AA and AAA: two levels, two thresholds").
6. A semi-transparent dark band or gradient can be added behind the headline; that way, the background color depends on the band, not the skin in the photo, and the same contrast is achieved in every photo ("Example — a headline over a photo").

Sources

• W3C, "Web Content Accessibility Guidelines (WCAG) 2.2," W3C Recommendation, December 12, 2024.
• W3C, "Understanding Success Criterion 1.4.3: Contrast (Minimum)," WCAG 2.2 explanatory document.
• W3C, "W3C Accessibility Guidelines (WCAG) 3.0," Working Draft, September 10, 2026.

Next step

GT-02 carries this lesson's ratios into typography: it covers value contrast, how color disappears in thin typefaces, when white text on a colored background works, and side-by-side pairs of vibrating colors. UX-08 turns measurement into process: it covers automated contrast checkers, vision simulators, high-contrast modes, and what these tools miss.