Why should your brand guide include accessibility standards?
An accessible brand offers equal access and enjoyment of your content for all users, strengthening your brand reputation and building trust with your audience. Including accessibility features like accessible web colors with proper color contrast, alt text for images, and keyboard navigation shows that your brand values all who interact with it while ensuring compliance with federal accessibility requirements.
A great way to implement accessible design and content creation across your brand is to include these standards in your brand guide. This gives your team quick and easy access to the rules they need to follow, without each of them needing to be an expert on WCAG standards. When working with outside contractors or freelancers, having these rules in your brand guide will also help ensure they are consistently followed.
In this blog we’ll focus on one of the first features of a brand we see– color. It’s important for the colors you use for text to be readable to users who have varying abilities to distinguish colors. WCAG outlines Level AA guidance for color contrast for text:
- Text has a 4.5:1 contrast ratio against its background color.
- Exception: Large text (14pt bold or 18pt) can have a contrast ratio of 3:1.
- Logos do not have a contrast requirement, but if you are designing a new logo you may still choose to use a 3:1 or greater contrast for accessibility.
These are the rules for accessible Web Colors we’ll be adding to our brand guide:
- Minimum color contrast for text
- Minimum color contrast for UI elements
- Minimum Font Sizes
- Link Styles
At the end of this blog I’ll also list other accessibility standards you might include in your brand guide and how they fit.
Creating Your Guidelines
Building a New Brand with accessible web colors
If you’re building a new brand, you should consider color contrast right away while making your choices of brand colors. Make sure you consider text colors for dark and light backgrounds. Test any color combinations that will be used for text for minimum color contrast. My favorite free tools are WebAIM.org’s Contrast Checker which includes a slider so you can make adjustments to your color until it’s just right; this nifty tool by designer and developer Andrew Hick that lets you check contrast between multiple colors at the same time; and this color matrix tool by Atul Varma. Define text colors and decorative colors separately. Ensure all text combinations meet WCAG contrast requirements for your target compliance level and common font sizes, while allowing more creative freedom with non-text design elements.
Adapting an Existing Brand to include accessible web colors
If you’re building out a brand guide for an existing brand, colors are probably already chosen for you. If you’re lucky, you’ll have some combinations that meet color contrast requirements. Establish what colors will be used for text versus what color combinations will only be used for decorative elements and ensure that all of your text color combinations meet contrast ratio requirements for the level of WCAG compliance you are trying to achieve and the text sizes that will commonly be used with those combinations. If none of the text color combinations currently used meet minimum contrast, there are a couple of options of how you can implement new colors that do.
- Create an alternative color of your brand’s color with increased or decreased brightness to meet the minimum contrast on the background colors it will be used on. Use this alternative color for text on the web. WebAIM’s contrast checker tool is good for making these adjustments.
- Change the background color. Almost every color out there meets contrast requirements for WCAG AA with either black (#000000) or white (#ffffff). Determine whether black or white is the correct pairing with your chosen color and use that.
Adding Your New Rules to Your Brand Guide
Include a Chart of Accessible web Colors
Now that we’ve determined what text and background color combinations will be allowed in your brand guidelines we can add this information to your document. You’ll probably want to add these rules as a page following your brand’s color palette. First include visual examples of each of the allowed color combinations. If some combinations are compliant for larger text sizes only, list those in a separate table. You can also include examples of UI elements with acceptable color combinations. (If your brand guide has a separate page for example CTA’s, you can also include those examples there.)
Include Negative Examples
In addition to including the compliant combinations of colors, you may also want to include a table of incorrect color combinations. This helps readers of your brand guide easily identify whether they are using your accessible color contrast brand standards correctly in the designs they create. Having this table is also useful if you need to communicate about revisions to a design that fails to meet your brand’s standards.
Include UI Elements and Link Styles
You’ll also want to include examples of UI elements like buttons that use minimum color contrast. To achieve this, you might introduce rules such as always including an outline on a button. Links within a paragraph also need to be distinguishable from surrounding text. Determine what link style examples you will include in your brand guide which could be using a color contrast ratio of 3:1 or the go-to solution of adding a decoration such as an underline.
Continue Optimizing Your Brand Guide!
Now that we’ve added these minimum color contrast rules to our brand guidelines, designers, developers and content creators who work with our brand will have an easier time creating work that meets accessibility standards, regardless of their previous knowledge of WCAG guidelines. Of course, color contrast is only a small part of accessible design. Some ideas for other standards you could add to your brand guidelines are included below.
- Include typography examples with font sizes and spacing optimized for readability.
- Include a style guide for writing alternative text for images. You can also include example templates of commonly used images for your brand and their appropriate alt text.
- Include styling of video captions.
- Include considerations for reading level in your brand voice writing guidelines.
- Include guidelines for proper heading hierarchy in written works like blog articles.
- Include standards for descriptive links.
Looking for someone to help you with designing new branding or a website with accessibility in mind? Online Optimism may be the best partner for your project. Learn more about our branding design services or read about our website design capabilities.
