I Can See Clearly Now: Color and Accessibility in Design
Have you ever spent hours tweaking the color palette of a design for a set of tints and shades that looked “just right”? Even if your goal is to make the user experience as visually pleasant as possible, you may be alienating a portion of your audience by prioritizing aesthetics over accessibility. While color choices are often in the client’s control and based on long-established brand identities and personal preferences, designers need to understand the guidelines for using proper color contrast in the context of accessibility. This means that what you design should be accessible for everybody, regardless of how they access or experience it.
Defining and Determining Color Contrast
If you’ve ever had difficulty reading something on a computer or phone screen because the typographic color was too dark or too light relative to the background, then you’re already familiar with the importance of high color contrast in design. The use of colors of a similar hue and intensity, known as low contrast colors, can prevent people with visual impairments from reading text or viewing content on a website. When we talk about contrast between colors, we’re mainly referencing the numerical ratio assigned to the difference in light between a given foreground and background. An accessible design would have a high contrast ratio, or a high difference in light, between the colors featured in text, images, links, buttons, and icons.
Imagine a website with pale yellow text on a white button — that kind of low contrast combination would make it difficult or even impossible for most people to comfortably read the words on the screen. On the other hand, changing the yellow to a dark shade of purple would ensure that the content is easy for everyone to see against the light background.
Although accessibility optimization typically falls into the hands of developers, color contrast compliance is one way that designers can directly take part. The key way to determine if your design has sufficient contrast is to confirm that it adheres to the Web Content Accessibility Guidelines (WCAG) standards as defined by the Web Accessibility Initiative of the World Wide Web Consortium. WCAG’s minimum success criterion, SC 1.4.3, dictates the lowest color contrast that is considered accessible. These guidelines say that normal-sized text, including pictures of text, requires a contrast ratio of at least 4.5:1 while larger text (18px/1.5em or larger, or if bolded, 14px/1.2em or larger) needs a contrast ratio of at least 3:1. To learn more and see the difference clearly for yourself, check out WebAIM’s handy contrast checker.
Designing for a Better Experience
While the issue of color contrast is particularly relevant for those with visual disabilities, prioritizing this kind of accessibility can make your website more easy to navigate. Accessibility is synonymous with usability, and everyone benefits when a website is designed with usability at top of mind. While increased contrast mainly serves to help people who perceive color differently, it can also create a better experience for anyone who happens to be browsing in the glare of bright sunlight, as they make their way down a busy street, or while squinting at a screen in the dark.
Although creating a fully accessible design is never an easy task, ensuring adequate color contrast is a great way to begin the process. In addition to guaranteeing that your product is usable to a wider audience, you’ll be taking a step in the right direction when it comes to making the web a more inclusive place for everyone.
Interested in learning more on how to make your design more accessible? Head over to Gymnasium’s new Accessibility Collection to explore free courses, tutorials, and resources on the topic.
