How to Incorporate Accessibility into Your Brand
By following WCAG guidelines, it’s not hard for brands to ensure all users can engage with their Web pages.
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.
Every brand is capable of implementing their styles to serve different kinds of users. While it’s important to work with developers to make sure your site is built with the functionality it needs to meet the requirements of the Web Content Accessibility Guidelines (WCAG), there are plenty of ways to ensure accessibility as soon as you start exploring the look and feel of a brand. Here are some visual elements you should always check for when designing for the Web using WCAG 2.1 AA and that we .
Color Contrast
For users with low vision, a certain contrast ratio is required between text or meaningful icons and their backgrounds. Meeting these requirements is even good for users who may have perfect vision, but are experiencing lower contrast on their screen due to the brightness of their device or bright light around them and their device. While no color is ever off limits, the combination of two colors needs to meet the contrast ratio requirements listed below. Often times, designers overlook these requirements in favor of incorporating their brand color on a white background. One recommendation our team often gives clients is to incorporate those low contrast brand color combinations in decorative ways rather than making the visibility of important icons and text reliant on a combination of colors that strain the eye or even make it impossible to see.
- All text needs to have a contrast ratio of at least 4.5 to 1 for text and icons that are 18 pixels or smaller
- Text and icons that are larger than 18 pixels must have a 3 to 1 contrast ratio
- You can check the contrast ratios between HEX colors on WebAIM’s Contrast Checker
Text Size & Line Height
In addition to color, size is also a key component in making sure users can read the text in your web designs. Body text used for anything as long as a sentence should be at least 16 pixels with a 24 pixel line height. Other text can go down to as small as 10 pixels, but if you expect your users to read anything longer than a few words make sure it is large enough for them to read with ease.
We recommend:
- 16 pixel base font with 24px line height for paragraph body text
- 10 pixel minimum size for other, shorter text
- When using larger body text, make sure that the line height is at least 150% of the text size itself
Link Styles
Calls-to-Action are often the most important things on a web page and you definitely don’t want your user to miss them! Even links that are less important in driving traffic are still on your page for a reason and your users should never have to guess what is clickable and what isn’t. Because WCAG AA standards account for users with color blindness, a link style cannot be distinguished by color alone. There needs to be some other visual differentiation between your links and all the other text on the page. Here are some examples of ways to add a visual element that signifies a link to users:
- Underline links. This is the most common practice across the web, but is not always best for stylized links on the page. Within block body copy, a default underline is always best.
- Icon before or after the link. Arrows are usually the most clear and can easily be designed to work within a brand identity. Some other icons may make sense as well. A common icon we use at Yext is the “Get Directions” icon by material design, which is common for users to see when looking to open a map interface.
- Interactive feedback states. Another thing to consider when designing links is that hover and active states give the user feedback that a button or link is clickable or has been clicked successfully. We recommend adding this if your brand does not use them currently.
- Common navigation patterns. The one exception to these practices is in standard navigation elements. Users have been conditioned to know that text in the header, footer and breadcrumbs are likely clickable. Although we still recommend that these are clearly styled links, it is not required for them to have any specific visual differentiation because of their location on the page.
The W3C gives us so many additional guidelines to make sure we design and develop web pages that are accessible to everyone. These visual principles are just the beginning, but they are absolutely essential to building a solid design system for any set of web pages.
