WCAG AA vs AAA contrast: what is the difference?

WCAG AA and AAA are two levels used in the Web Content Accessibility Guidelines. For color contrast, they describe how much contrast text should have against its background.

The short version: AA is the practical target for most websites. AAA is stricter and useful for some important content, but it is not always realistic for every design choice.

The basic contrast ratios

For ordinary text, the common WCAG contrast targets are:

Level	Normal text	Large text
AA	4.5:1	3:1
AAA	7:1	4.5:1

Large text has a lower contrast requirement because bigger, heavier text is easier to read. WCAG defines large text by size and weight, not just by whether it looks visually prominent.

For meaningful non-text elements, such as important icons, input borders, and visual states, WCAG 2.1 introduced a common 3:1 target for non-text contrast in many cases.

What does AA mean?

AA is the level many teams use as their baseline. It is stricter than the minimum A level and covers many common accessibility needs without making ordinary web design impossible.

For contrast, AA means normal text should usually reach at least 4.5:1 against its background. Large text should usually reach at least 3:1.

Examples of things you should check against AA include:

• paragraph text;
• navigation labels;
• links;
• button text;
• form labels;
• error text;
• text inside cards and badges.

If you are building a normal marketing page, blog, documentation site, tool page, or product interface, AA is usually the first target to meet.

What does AAA mean?

AAA is a higher level. For normal text, it asks for a 7:1 contrast ratio. That is noticeably stronger than AA.

AAA can be valuable for:

• long reading pages;
• critical instructions;
• government, education, health, or public-service content;
• interfaces used in difficult lighting;
• audiences that may include many readers with low vision.

But AAA is not always possible for every piece of text, especially with brand colors, large color palettes, or complex UI states. A site can be well designed and still not meet AAA everywhere.

Should every website aim for AAA?

Not necessarily. A better practical approach is:

1. Make sure important text meets AA.
2. Use AAA where it is easy and helpful, especially for body text.
3. Avoid using low-contrast decorative text for essential information.
4. Check buttons, links, form states, and icons, not just paragraphs.

For example, dark charcoal text on white may pass AAA. A medium gray label may pass AA but not AAA. A pale gray caption may fail both.

Why your design can pass in one place and fail in another

Contrast depends on the exact pair of colors. The same green might work well for dark text on a pale background but fail as white text on a bright button.

It also depends on context:

Element	What to test
Body text	Text color against page background
Button	Label color against button fill
Link	Link color against surrounding background
Input	Border or focus indicator against nearby background
Icon	Icon color against the surface behind it

Do not assume a brand color is accessible in every use. Test each actual color pair.

How to choose a sensible target

For most small websites, a good rule is:

• aim for AA as a minimum for all important text;
• use AAA for body text when it fits the design;
• avoid tiny, pale, decorative labels for anything the user needs to understand;
• check non-text controls if they communicate meaning.

You can test color pairs with ToolSnap’s color contrast checker. If a color is copied from CSS in hex form and you need RGB values for another tool or design note, the hex to RGB converter can help.

Quick rule to remember

AA is the practical baseline. AAA is a stronger target. If readers need the text to complete a task, do not leave its contrast to taste or guesswork: check the ratio.