Web Content Accessibility Guidelines (WCAG)

WCAG Levels A, AA and AAA Explained
WCAG Levels A, AA and AAA Explained

The Web Content Accessibility Guidelines or WCAG are long, complicated and pretty confusing at times especially for those who are new to it. In this guide we’re going to demystify them and explain what the difference is between the three WCAG levels particularly for beginners.

These are the WCAG guidelines, which are pretty much the universal standard used to measure the accessibility of a website. Websites are evaluated based on whether they meet certain criteria such as criterion 1.1.1: Non-text content. Each of the criteria have a level and this one is level A.

Level A, Level AA and Level AAA

To begin with,  there’s Level A, Level AA and Level AAA. The idea is that each level gets progressively harder to meet; it’s much easier to get a website to conform to Level A than it is Level AAA.

As mentioned earlier, there are many success criteria that make up the WCAG guidelines. At level A, there are 25 criteria that you have to meet.

Level AA has another 13 criteria to meet. At WCAG Level AA, your website has to pass all of the Level A criteria and then all of the Level AA ones in addition. This takes the total required for level AA to 38.

Level AAA adds a further 23 criteria bringing you to a grand total of 61 criteria to pass.

Examples of Conformance Levels

Let’s look at a few examples of success criteria at the different levels. We’ll look at the examples that dictate the use of color on our website starting with Level A.

Color contrast comparison
Color contrast comparison

At Level A, we have to ensure that color is not the only means of conveying information. That means we can’t present the user with a load of unlabeled, different colored buttons and ask them to press the green one. It sounds simple enough but you have to be careful with the use of things like data charts because you can’t use color alone to identify a series or trend.

Also, we’ll see what additional requirements come in at Level AA. You have to meet some color contrast requirements. There are lots of online tools to check this but the rules are fairly strict. The average website’s going to have some problems with contrast and needs some of the colors adjusting to meet this Level AA requirement.

Let’s look at some examples of color contrast between text and background to see this in practice. In the image below, those three with checks pass the Level AA contrast requirement.

Color contrast that passed
Color contrast that passed

These other ones quite clearly don’t as they’re hard to read. But what about the remaining two?

Color contrast that didn't pass
Color contrast that didn’t pass

These may look okay and can be seen pretty often on websites but If you’re going to base it on the contrast requirements, they actually didn’t pass so it’s pretty strict.

Additional color contrast that didn't pass
Additional color contrast that didn’t pass

Moving on to Level AAA, the color contrast requirements become much stricter to the point where it becomes quite difficult to style a site to look good. Almost all colored text fails.

Here are our results from the Level AAA criterion. At this level, it really only allows white text on very dark backgrounds or black text on very light.

Level AAA color contrast test
Level AAA color contrast test

So knowing the difficulty level, which should you be aiming for with your website?

The majority of websites will be trying to meet Level AA and this is what we would recommend. Where websites legally have to be accessible, it depends on the specific laws but it tends to mean that they have to meet Level AA.

In general, Level A is generally regarded as not being quite sufficient to meet most users’ needs. Level AAA tends to be met by more specialized sites like for example, a charity for the blind.

Let’s have an example:

A website has passed 90% of the Level A criteria, 40% of Level AA and 10% of Level AAA.

WCAG 2.0 conformance levels
WCAG 2.0 conformance levels

So which WCAG level does it meet overall? The answer is none of them.

The bottom line is you have to meet every single one of the criteria at a level to be able to state that the website has that level of accessibility. It doesn’t matter that this website even has some of the more advanced criteria, it does not meet WCAG Level A.

We don’t want that to put you off making improvements to the accessibility of your website though. Each new criterion passed makes your website easier to use. If this was the current picture and you rolled out this update, you are still not meeting any WCAG Level but you’re making important progress and users will notice and benefit from it.

About the author

David Cote

David Cote believes that all users should have a reasonably equivalent experience when accessing a piece of content and that the WCAG guidelines can make this possible. He writes articles which may help website developers and designers to make their projects more compliant with these standards.

Add Comment

Click here to post a comment