WCAG Color Contrast Explained

Here is WCAG color contrast explained the way I wish someone had told me years ago. Contrast is the difference in brightness between text and its background, and WCAG sets the numbers that decide whether that difference is enough for people to read comfortably. Get it right and your product is readable for everyone, including users with low vision.

This post is for designers and developers who want to understand the rules, not just copy a checker's verdict. I will explain the contrast ratios, what the formula means in plain words, the difference between AA and AAA, the special rules for large text and UI elements, and finish with a pass and fail table you can use as a quick reference. Let us make the numbers make sense.

Key takeaways

What WCAG color contrast actually measures

WCAG stands for the Web Content Accessibility Guidelines, the standard that defines how to make web content usable for people with disabilities. One of its most cited rules is about color contrast between text and background.

Contrast here is measured as a ratio, written like 4.5:1. The first number compares the lightness of the lighter color to the lighter of the darker color. A ratio of 1:1 means the two colors are identical, so the text would be invisible. A ratio of 21:1 is the maximum, pure black on pure white.

The bigger the ratio, the easier the text is to read. WCAG then sets minimum ratios for different situations, which is where the well-known numbers like 4.5:1 come from.

The contrast formula in plain words

You do not need to do this math by hand, but understanding it helps you reason about colors. The formula has two steps: find the relative luminance of each color, then compare them.

Step one: relative luminance

Relative luminance is a single number for how bright a color appears, from 0 for black to 1 for white. It is not a simple average of red, green, and blue. Green counts most toward brightness, red is in the middle, and blue counts least, because human eyes are most sensitive to green.

The formula also applies a small curve to each channel before weighting it. This curve accounts for how screens encode color and how we perceive it. The result is one luminance value per color.

Step two: the ratio

Once you have the luminance of both colors, the contrast ratio is simple. You take the lighter luminance plus 0.05, then divide by the darker luminance plus 0.05. The small 0.05 accounts for ambient light reflecting off the screen.

So the whole idea is brightness over brightness, with a small offset. A checker runs this for you in milliseconds, but now you know what those numbers represent. For the exact equations, see the official WCAG contrast minimum page.

AA versus AAA

WCAG defines levels of conformance, and contrast appears at two of them: AA and AAA. AA is the practical and legal baseline that most products aim for. AAA is a stricter, enhanced level for the highest accessibility.

For normal body text, AA requires a ratio of 4.5:1, while AAA raises it to 7:1. The jump to AAA means text stands out more, which helps users with greater vision loss but can limit your color choices.

Most teams target AA across the board and reach for AAA on critical reading content where they can. You do not have to hit AAA everywhere, but knowing the bar exists helps you make deliberate choices.

Large text gets a lower bar

You may have noticed large text needs only 3:1 at AA, not 4.5:1. That is because bigger, heavier letters are easier to read even at lower contrast. WCAG rewards that with a gentler threshold.

The definition is specific. Large text means at least 18 point, which is roughly 24 pixels, for regular weight. For bold text the bar drops to 14 point, which is about 18.66 pixels. Below those sizes, the stricter 4.5:1 applies.

Be careful not to lean on the large-text rule as a loophole. Body copy is almost always normal text, so 4.5:1 is the number you live with most. Use the 3:1 allowance for genuine headings and display type.

UI components and graphics

Contrast is not only about text. WCAG 2.1 added a rule for non-text contrast, covering interactive controls and meaningful graphics. These must reach 3:1 against their surroundings.

That means the border of an input, the outline of a button, a focus ring, the slices of a chart, or an icon that conveys meaning all need 3:1. A button you cannot see the edge of is an accessibility failure, even if its label passes.

It is easy to forget these because they are not words. A quick habit is to check every control and any graphic that a user must perceive to operate the interface. Decorative graphics are exempt.

A pass and fail reference table

Here is the part you will bookmark. These are common indigo pairings from our brand scale, with their approximate WCAG ratio and verdict. Use it as a model for reading your own colors.

Notice the pattern. Pairings from opposite ends of a scale pass, while two mid shades together fail. That single habit, pairing dark with light, solves most contrast problems before a checker ever flags them. Our accessible color system guide builds on this idea.

Want every pairing checked at once? Open the Zepixo Colors workspace and read the whole palette in an 11 by 11 contrast grid that shows WCAG ratios cell by cell.

WCAG is the baseline, not the ceiling

Passing WCAG 2 is necessary, but it has a known limitation. The luminance formula can be slightly inaccurate at the very light and very dark ends of a scale, and it ignores polarity, meaning it treats dark-on-light the same as light-on-dark.

A newer model called APCA addresses these gaps and is being developed for future WCAG versions. The practical approach today is to pass WCAG 2 for compliance and also glance at APCA for a truer sense of readability. Our APCA contrast explained guide covers it in full, and the accessibility docs show both side by side.

Frequently asked questions

What is the WCAG contrast ratio for normal text?

Normal body text needs a contrast ratio of at least 4.5:1 to meet WCAG level AA. To meet the stricter AAA level, it needs 7:1. The ratio compares the brightness of the text to the brightness of its background.

What counts as large text in WCAG?

Large text is at least 18 point, roughly 24 pixels, at regular weight, or at least 14 point, about 18.66 pixels, when bold. Large text only needs a 3:1 ratio at AA. Anything smaller must meet the full 4.5:1.

What is the difference between AA and AAA contrast?

AA is the standard baseline most products target, requiring 4.5:1 for body text. AAA is an enhanced level requiring 7:1 for body text, used for the highest accessibility. AAA gives stronger readability but limits your color choices.

Do icons and borders need to meet contrast rules?

Yes. WCAG 2.1 requires UI components and meaningful graphics to reach 3:1 against their surroundings. That covers input borders, focus rings, toggles, and icons that carry meaning. Purely decorative graphics are exempt.

How is the contrast ratio calculated?

You find the relative luminance of each color, then divide the lighter value plus 0.05 by the darker value plus 0.05. Luminance weights green most and blue least, matching how eyes perceive brightness. A checker runs this math for you instantly.

Is WCAG 2 contrast perfect?

No, its formula can be inaccurate at extreme light and dark values and ignores polarity. It remains the legal and practical baseline today. The newer APCA model is more perceptually accurate and is planned for future WCAG versions.

Once the numbers click, contrast stops being a chore and becomes a quick check. Pair dark with light, aim for 4.5:1 on body text, and you are most of the way there.