Accessibility Design (AA/AAA)

Color Contrast

Color contrast is an often overlooked web accessibility problem. People who have low vision could find it difficult to read text from a background color if it has low contrast. In a fact sheet on visual impairment and blindness, the World Health Organization (WHO) estimates that there are 217 million who have moderate to severe vision impairment. So, it is critical to consider the sufficient contrast between text and backgrounds.

Critical Information

When you’re communicating something important, showing an action, or prompting a response, don’t use color as the only visual cue. People with low visual acuity or color blindness will have a hard time understanding your content.

Focus States

Have you noticed the blue outlines that sometimes show up around links, inputs, and buttons? These outlines are called focus indicators. Browsers, by default, use a CSS pseudo class to show these outlines on elements when they’re selected. You might find these default focus indicators not very pretty and be tempted just to hide them. However, if you get rid of this default style, be sure to replace it with something else.