Member-only story
Getting WCAG color contrast right
Actionable tips on how to nail WCAG 2.1 color compliance.
What is WCAG
Web Content Accessibility Guidelines (WCAG) define rules, that make your product accessible to people with disabilities.¹*
The WCAG is an open standard developed by the w3c together with individuals and orgs around the world. (Like all other w3c standards).
* Being general guidelines following the WCAG won’t make your product 100% accessible for everyone.
Why should I care about WCAG 2.1?
The WCAG 2.1² (3.0³ is still a draft) is seen as the most accurate requirement to achieve an accessible product. So much so, that governments all over the world legally require it. This happens through laws like Section 508⁴ or the European Accessibility Act (EAA)⁵.
This means you need to be WCAG 2.1 compliant if you offer your products to government organisations or if you want to be able to do so in the future.
It also opens your product up to a larger user base. Don’t forget that disabilities can be temporary⁶. For example if your product is used in a hectic environment, let’s say in a food truck or café. A more accessible product will be easier to use for people who are stressed.
Lastly, it is a lot easier and less time consuming to make your product accessible while you build it. Reworking your entire product to fulfil WCAG 2.1 all at once, when you have a customer who requires it is a nightmare.
AA vs. AAA conformance
The W3C defines 3 levels of conformance⁷: A, AA, and AAA. The high level includes all lower levels, so AA also includes A conformance.
Most organisations strive to achieve AA conformance. AA is a good balance between accessibility and a great visual design that fits with your brand. If possible, add a separate theme with partial AAA conformance. For example a high contrast theme. This is especially helpful if you are building a (web) software that is used by people in their daily work.
AAA conformance requires a 7:1 contrast ratios for text, sign language translations for pre-recorded videos and more. But the…
