Menu

Search toolsChangelog

to move to openDescribe the problem, not the tool

Guide answer

Why average RGB gives the wrong text-colour answer

Average RGB treats encoded red, green and blue numbers as equal amounts of light. They are neither linear nor equally weighted. WCAG first converts each sRGB channel to a linear value, then uses 0.2126 red, 0.7152 green and 0.0722 blue before calculating the contrast ratio. Compare black and white with that luminance; do not choose from the arithmetic mean or a visual label such as “dark.”

What to take away
  1. The green channel carries far more of the relative-luminance weight than the blue channel.

  2. Contrast is a relationship between two colours, not an intrinsic brightness score stored in one colour.

  3. The stronger black-or-white pairing is a useful default, while the rendered component still needs accessibility review.

The full explanation

A colour can look bright because one encoded channel is large and still have less relative luminance than a duller-looking colour. WCAG contrast starts by converting sRGB values back to proportional light, weighting the channels and comparing two luminances. Average RGB and visual adjectives answer different questions. Read the complete guide for the reasoning, examples and definitions behind this answer.

Use the idea

Sources