WCAG Contrast Between the Colors of a Color Palette

A contrast ratio is the WCAG measure of the luminance difference between two colors, calculated as (L1 + 0.05) / (L2 + 0.05). L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color. WCAG 2.2 is a W3C Recommendation, and its current version is dated 12 December 2024.

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Contrast ratios range from 1:1 to 21:1. Two identical colors produce 1:1. Black (#000000) and white (#FFFFFF) produce 21:1, the maximum.

How is relative luminance calculated?

Relative luminance is calculated in three steps from the red, green and blue channels of an sRGB color. The result runs from 0 for black to 1 for white.

1. Divide each 8-bit channel by 255 to get a value from 0 to 1 (R_sRGB = R8bit / 255).
2. Linearize each channel with the sRGB transfer function shown below.
3. Add the weighted channels: 0.2126 for red, 0.7152 for green and 0.0722 for blue.

R = R_sRGB / 12.92 if R_sRGB <= 0.04045, otherwise R = ((R_sRGB + 0.055) / 1.055) ^ 2.4

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

The green weight dominates the sum. Pure green (#00FF00) has a relative luminance of 0.7152, and pure blue (#0000FF) has a relative luminance of 0.0722. Pure blue therefore reaches 8.59:1 against white, and pure green reaches only 1.37:1 against white.

WCAG 2.2 sets three contrast thresholds for palette colors: 4.5:1 for normal text at Level AA, 7:1 for normal text at Level AAA, and 3:1 for non-text UI parts and graphics at Level AA.

The 4.5:1 threshold compensates for the contrast sensitivity loss typical of about 20/40 vision, according to the W3C Understanding document for SC 1.4.3. The 3:1 threshold is the minimum that ISO-9241-3 and ANSI-HFES-100-1988 recommend for standard text and vision. SC 1.4.11 entered the standard in WCAG 2.1.

What counts as large-scale text?

Large-scale text is text of at least 18 point, or at least 14 point bold. With 1 point equal to 1.333 CSS pixels, 18 point is about 24px and 14 point bold is about 18.5px, as stated in the W3C Understanding document. CJK fonts use an equivalent size.

Are contrast ratios rounded?

Contrast ratios are not rounded up to meet a threshold. W3C states that 4.499:1 does not meet the 4.5:1 threshold. Gray #767676 on white reaches 4.54:1 and passes AA for normal text. Gray #777777 on white reaches 4.48:1 and fails, although the two grays differ by one step per channel.

Which text has no contrast requirement?

Logotypes and incidental text have no contrast requirement under SC 1.4.3 and SC 1.4.6. A logotype is text that is part of a logo or brand name. Incidental text is text in an inactive UI component, pure decoration, invisible text, or text inside a picture with significant other visual content. The exception covers the logo itself, not brand colors reused for body text, headings or buttons. The guide to finding a logo's exact color codes shows how to read them.

Checking a color palette means listing every color pair, calculating the contrast ratio of each pair, and comparing that ratio with the threshold for the pair's intended use. A palette of n colors contains n(n - 1) / 2 color pairs. A palette of 6 colors has 15 pairs, and a palette of 10 colors has 45 pairs.

number of color pairs = n * (n - 1) / 2

Each pair needs only one calculation, because the contrast ratio is symmetric. The formula always places the lighter color in the numerator, so swapping the text color and background color gives the same ratio.

1. 01

   Extract the palette

   Pull the colors from an image with the Color Palette Extractor, or read them from a live site with the Website Color Extractor.

2. 02

   Calculate relative luminance

   Convert each color to relative luminance with the WCAG 2.2 formula.

3. 03

   Calculate every pair

   Apply (L1 + 0.05) / (L2 + 0.05) to each of the n(n - 1) / 2 color pairs.

4. 04

   Assign a role to each pair

   Mark each pair as normal text, large-scale text, a UI component or graphic, or background only. The role sets the threshold.

5. 05

   Compare against the threshold

   Compare each ratio with 4.5:1, 3:1 or 7:1 without rounding. Flag every text pair that falls below its threshold.

The Color Palette Extractor shows each extracted color's WCAG 2 contrast ratio against white and against black, with AA and AAA badges. Its contrast table tests every color pair in the extracted palette and marks each pair as AA, AAA or AA Large. All processing happens in the browser. How color extraction works explains how the palette is chosen.

Low contrast text is the most commonly detected accessibility issue on the web. The WebAIM Million 2026 report found text below the WCAG 2 AA threshold on 83.9% of the top 1,000,000 home pages, up from 79.1% in 2025. WebAIM drew the home pages from the Tranco ranking and collected the data in February 2026. Each home page had 34 distinct instances of low contrast text on average, up 15% from 2025.

The 2026 figure reverses a four-year decline from 86.4% in 2021 to 79.1% in 2025. Low contrast text ranks first among the six most common failure types, which together cover 96% of all detected errors and have stayed the same for 7 years.

A failing color pair is fixed by changing the lightness of one color until the contrast ratio reaches the threshold, while the hue stays the same. Darkening the text color or lightening the background color raises the ratio.

Change lightness in OKLCH

OKLCH separates lightness (L), chroma (C) and hue (H), so a lightness change leaves the hue angle untouched. HSL lightness does not track perceived lightness: sRGB blue and sRGB yellow both have an HSL lightness of 50%, while their OKLCH lightness is 0.452 and 0.968 (CSS Color 4). A constant-hue OKLCH slice around sRGB blue keeps the same visible hue, and the equivalent CIE LCH slice shows noticeable purpling. Recalculate the contrast ratio after each change, because WCAG uses relative luminance, not OKLCH lightness.

Pick a step from a tint and shade scale

A tint and shade scale offers ready lightness steps of one hue, from 50 (lightest) to 950 (darkest). For text on a light background color, move the text color toward the 950 end. For text on a dark background color, move the text color toward the 50 end. The Color Palette Extractor builds a 50 to 950 scale in OKLCH for every extracted color, so the replacement step keeps the original hue.

Test text on background, not background on background

The text thresholds apply to a text color against the background color behind it. Two background colors placed side by side carry no text contrast requirement. They need 3:1 under SC 1.4.11 only when their boundary identifies a UI component, a component state, or a part of a graphic needed to understand the content.

• Use a brand color that reaches 3:1 but not 4.5:1 for large-scale text, icons or input borders only.
• Use a brand color that fails with every palette color as a background color, and set white or black text on it, whichever gives the higher ratio.
• Recheck every pair that shares the changed color, because one change affects n - 1 pairs.

WCAG 3 does not change the contrast rules today. WCAG 3.0 is a W3C Working Draft dated 10 September 2026, and W3C states that the draft is inappropriate to cite as anything other than a work in progress.

WCAG 3.0 status

W3C Working Draft, 10 September 2026

Text contrast requirement

"Text contrast sufficient (minimum)", status Developing, measure "to be determined"

Contrast algorithm

Not chosen; the editor's note states it is yet to be determined

APCA (Advanced Perceptual Contrast Algorithm)

Absent from the WCAG 3.0 Working Draft; not a normative requirement

Normative thresholds

WCAG 2.2: 4.5:1, 3:1 and 7:1 remain the W3C requirements