DEV Community

Cover image for 5 sec about a11y: colours
Catherine Starobor-Strakhova
Catherine Starobor-Strakhova

Posted on

5 sec about a11y: colours

One of the easiest ways to start adding accessibility to an interface is to start paying attention to the contrast between the background colors and the elements on it.
So, white on white is considered 1:1, the contrast of black and white is 21:1. The minimum allowable contrast in most cases is 4.5:1 - these are the requirements for WCAG 2.1 level AA. There is also level A - it is softer, and level AA - it contains the most stringent requirements.
There are many sites and plugins for checking contrasts, both for the web and for Figma.
Using the rules of the AA level, it is difficult to make airy, translucent interfaces, but you can be sure that the information will be read well on different devices in different lighting conditions and will be available to people with imperfect vision.

Top comments (5)

Collapse
 
eric23 profile image
Eric

What plugins would you recommend for Firefox and Chrome?

Collapse
 
auroratide profile image
Timothy Foster

Contrast Ratio is a pretty good website for testing out various colors! It lets you know the WCAG compliance level as well.

On Chrome I have the axe Devtools plugin, which tests for a variety of accessibility concerns, color contrast among them.

Collapse
 
eric23 profile image
Eric

Thanks, Timothy!

Collapse
 
catrin__s profile image
Catherine Starobor-Strakhova

I use only Chrome, so I have NoCoffee vision simulator and WAVE Chrome extension

Collapse
 
eric23 profile image
Eric

Thanks! I’ll be checking them out on the weekend.