What is AA vs AAA?
How to read your contrast checks and determine whether or not you’re complying with standards
When checking contrast for colors or text virtually anywhere, you’ll find the labels AA
vs AAA
pop up frequently. These are the different conformant levels for contrast checking based on the WCAG 2.0 standards for accessibility.
Different companies have different conformant levels they must meet based on situation and purpose of the product or service. But really, all companies should meet them to ensure they’re providing a great experience for everyone and not excluding an extremely large number of people — like individuals with a different types of colorblindness, cognitive or neurological disorders, and more. To be completely honest though, it makes the experience a whole lot better for everyone using your product, not just those with obvious disabilities.
Priority Levels
Here are the priority levels for AA, AAA, and how they’re determined.
Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
- Single A is viewed as the minimum level of requirement which all websites, apps, and electronic content such as documents should adhere to. This is essentially the most viable option but kind of shows that you gave minimal care. Try to at least get to AA!
- Double A (AA) compliance is the acceptable level of accessibility for many online services, and should work with most assistive technology.
- Triple A (AAA) is the gold standard level of accessibility, which provides everything for a complete accessible compliance, crossing the Ts, which make the difference between a pretty good experience with some roadblocks, and an excellent one that everyone can use.
Checking Contrast in Stark
In regards to how compliance and Stark come together, we make it easy to check whether or not your shape colors or text colors are passing these contrast checks on an AA and AAA level along with ensuring you can see what your design(s) look like for individuals with all types of colorblindness, low-vision, and more.
We'd love to join you on your accessibility journey! Get started with Stark by installing our free plugins for Figma, Adobe XD, Sketch, and Google Chrome.