The WCAG contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). To meet WCAG 2.1 and 2.2 Level AA, normal text needs at least 4.5:1 against its background, large text needs 3:1, and UI component boundaries and meaningful graphics need 3:1. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color.
The contrast ratio formula
WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05). L1 is the relative luminance of the lighter color and L2 of the darker one. The 0.05 added to each models a little ambient light reflecting off the screen, and it also keeps the ratio from dividing by zero when one color is pure black. Because the lighter color always goes on top, the ratio is the same whichever color is the text: gray on white and white on gray score identically.
Pure white has a luminance of 1 and pure black has 0, so the maximum is (1 + 0.05) / (0 + 0.05) = 21. Two identical colors give 1. Every other pair lands somewhere in between.
How relative luminance is calculated
Relative luminance estimates how much light a color emits, normalized to a 0 to 1 range. It takes three steps:
- Divide each 8-bit channel by 255 to get a value from 0 to 1.
- Linearize it to undo sRGB gamma encoding: values at or below 0.04045 are divided by 12.92, and larger values become
((c + 0.055) / 1.055) ^ 2.4. - Weight the linear channels and add them:
L = 0.2126 R + 0.7152 G + 0.0722 B.
Those weights explain many practical results. Green supplies about 72% of luminance and blue only about 7%, so pure blue #0000FF on black scores just 2.44:1, while pure yellow #FFFF00 on white scores 1.07:1. It is also why HSL lightness is a poor guide to contrast, as RGB vs HSL vs OKLCH shows. The WCAG 2 text lists the linearization threshold as 0.03928, taken from an older sRGB draft; no 8-bit value falls between 0.03928 and 0.04045, so both versions give identical results for web colors.
Worked example: why #767676 is the benchmark gray
Take gray #767676 on a white background. Every channel is hex 76, which is 118.
- 118 ÷ 255 = 0.4627.
- Linearize: ((0.4627 + 0.055) / 1.055) ^ 2.4 = 0.4907 ^ 2.4 ≈ 0.1812.
- All three channels are equal and the weights sum to 1, so L = 0.1812.
- Ratio against white: (1 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312 ≈ 4.54:1.
That passes AA for normal text. One step lighter, #777777 (119 per channel), comes out at 4.47:1 and fails, which makes #767676 the lightest gray you can use for body text on pure white. WCAG does not round in your favor: 4.49:1 is a fail. For the AAA level of 7:1, the equivalent benchmark is #595959, which measures just over 7.00:1 on white.
WCAG contrast thresholds
The requirements come from three success criteria. WCAG 2.2, published in October 2023, kept all of them unchanged from 2.1.
- Normal text, Level AA (SC 1.4.3): 4.5:1.
- Large text, Level AA (SC 1.4.3): 3:1.
- Normal text, Level AAA (SC 1.4.6): 7:1.
- Large text, Level AAA (SC 1.4.6): 4.5:1.
- UI components and graphical objects, Level AA (SC 1.4.11): 3:1 against adjacent colors.
What counts as large text
Large text is at least 18 point regular or 14 point bold. In CSS pixels that is 24px regular, or about 18.66px bold (14pt × 4/3). A 20px regular heading is not large text and still needs 4.5:1, while a 19px bold label qualifies as large and needs only 3:1. Thin typefaces and fonts with small x-heights read smaller than their nominal size, so treat these figures as minimums, not targets.
Gradients, images and transparency
When text sits on a gradient or a photo, measure it against the part of the background where contrast is lowest, not an average. For semi-transparent colors, measure the color the viewer actually sees after compositing: rgba(0, 0, 0, 0.5) text on white renders as a mid gray that measures about 4:1, which fails the 4.5:1 requirement.
Non-text contrast and exemptions
SC 1.4.11 extends contrast to elements that are not text. The border of a text input, the outline of a checkbox, a focus indicator, the selected state of a toggle and the lines of a chart that carry meaning all need 3:1 against the colors next to them. A pale border such as #E0E0E0 on white reaches only about 1.3:1 and fails; #949494 is the lightest gray that reaches 3:1 on white. Alternatively, give the field a contrasting fill so its edge is still identifiable.
Some content is exempt from the contrast requirements:
- Text that is part of a logo or brand name.
- Incidental text: pure decoration, text that is not visible to anyone, or text inside a photo that contains significant other visual content.
- Text and components that are part of an inactive, disabled control.
The disabled exemption is narrow. It covers controls that genuinely cannot be used; a button that looks disabled but still responds to clicks is not exempt. Contrast is also not the only color rule. SC 1.4.1 Use of Color says color must never be the only way information is conveyed, which matters for the roughly 1 in 12 men of Northern European ancestry who have red-green color vision deficiency.
Legal context: where WCAG contrast is required
WCAG 2.x Level AA is the benchmark most accessibility laws point to, which turns 4.5:1 and 3:1 into compliance numbers rather than style preferences:
- United States, ADA: courts regularly look to WCAG in website accessibility cases, and the Department of Justice's 2024 rule for state and local governments adopts WCAG 2.1 AA.
- United States, Section 508: federal agencies' electronic content must conform to WCAG 2.0 AA.
- European Union: the EN 301 549 standard incorporates WCAG 2.1 AA, and the European Accessibility Act, which applies from June 2025, extends requirements to many private-sector products and services.
This is general information, not legal advice, so confirm the rules for your organization and jurisdiction. A newer method, APCA, was proposed for WCAG 3, but that standard is still a draft; APCA vs WCAG explains how the two methods compare.
Try it: check a color pair
Enter a foreground and background in the contrast checker to get the exact ratio with pass or fail for all five thresholds, plus the APCA Lc value and a live text preview. Pairs are shareable, so /contrast-checker?fg=767676&bg=ffffff reproduces the example above. The checker also simulates the pair under four types of color vision deficiency; to test whole screenshots, use the color blindness simulator. If a pair fails, generate darker shades of the same hue until it passes.