What do pizza and accessibility have in common?
They’re both social and cultural necessities.
And yet… Domino’s Pizza made both completely unattainable when it violated federal law by not making their website fully accessible to a blind customer, preventing them from placing an order.
I have been surprised to learn that many of the brands and organizations we love and know tend to leave out the A of IDEA—accessibility (IDEA standing for inclusion, diversity, equity, and accessibility). I’ll admit, accessibility is a big topic with a steep learning curve; the international standards, called WCAG, have 12-13 guidelines to ensure websites are perceivable, operable, understandable, and robust.
When it comes to branding and visual design, we focus on meeting the standards for perceivable, which means ensuring that logos, fonts, websites and documents are visually perceivable to people who have no or low vision, color blindness, or use a screen reader for any reason. Taking accessibility into account of your visual branding ensures that all users of your website, readers of that critical annual report, and viewers of that last-minute social post can engage with all content despite any disabilities, illnesses, limitations, or differences. And that will not only save you from a lawsuit, it will allow you to engage the 61 million Americans living with disabilities or with the $13 trillion Global Disability Market.
There is no equity without disability justice. A brand cannot fully support IDEA initiatives if its visual identity isn’t accessible, which is why Brevity & Wit now offers visual accessibility audits for brands, which evaluate brand identities on four factors:
Logo Design
We all know that logos are the face of a brand. It’s what your audience sees across an organization’s publications, social media profiles, and website. While color contrast and typography are critical in setting up a logo, scalability and level of detail are often overlooked.
Logos should be simple, have minimal colors, and should not be so complex that its legibility is compromised. Consider the placement of a logo in a favicon (that little logo icon that sits beside each tab in your browser). Can your organization’s logo reduce to a micro-scale and still be legible? Or is it hard to see the details?
Look at the evolution of the Apple logo in the image below. The 1976 logo can be read at a larger scale, but there are even some elements, such as the type around the corner of the frame, that are unintelligible. And at a smaller scale, forget it. As someone who has near-perfect vision, I can barely make out any details or typography.
The 1976 logo was designed by Ronald Wayne, one of Apple’s founding partners, along with Steve Wozniak and Steve Jobs. Rob Janoff designed the 1977 Apple logo, which was then converted to grayscale. Both apple-shaped logos are trademarks of Apple Inc. Apple Inc. did not endorse or sponsor this post.
While the 1977 logo is drastically modernized and much more readable, there are still some legibility issues. Obviously, there is not an issue regarding text, but there is not enough color contrast amongst each color, nor enough contrast in parts of the logo over its background. Meaning, if you have low or poor vision, some of those six colors (such as the green, yellow, and orange) do not offer enough variance over a white background and cannot be seen clearly. The six colors in the logo also seem to vibrate when they’re reduced, making some of the defined lines in the logo appear to blend together, like the purple and red, and the red and the orange.
Today’s Apple logo is the perfect example of an accessible logo. It’s black, typically displayed over a white background, which offers the best color contrast. It’s scalable, so it can be reduced to almost any size and still be recognizable (check out their favicon). And there isn’t any typography that becomes lost or illegible when the logo needs to be made smaller.
Typography
Do readers squint while reading the tiny numbers on that infographic? Are their eyes strained when scanning text across the screen? One simple fix for this may be increasing your brand’s font size on digital properties. Not only will this make content easier to read, but bumping up the font an extra few points will maintain a comfortable line of text for reading — approximately 66 characters per line is ideal.
Typography also needs to have hierarchy. Titles should be differentiated from headers, and headers should be differentiated from body text. This makes text easier to navigate, and if set up correctly, can be read by screen readers successfully. This goes for both websites as well as PDF files. (More on this a little later.)
Type set A, featured in the below image, is a snapshot of typography guidance I had received from an organization. There isn’t any sort of font hierarchy exemplified, other than the small “header,” “subheader,” and “body paragraph” labels, making the typography difficult to decipher. And there aren’t any samples of how the existing fonts are intended to work as a whole. Type set B is the typography guidance I redeveloped for the brand. It illustrates how typography can be set up, depicts reasonable lengths for lines of text, and includes branded color options for the various font hierarchies.
Color
We’ve all been guilty of placing white text over a yellow background, whether it’s been in Microsoft Paint, Google Slides or Adobe Photoshop. But yellow and white are two colors that are not compatible when it comes to visual accessibility. There just simply isn’t enough contrast to be WGAC compliant. This doesn’t just go for yellow, but an entire spectrum of colors, such as light gray over white, bright colors over white, black over a dark shade — it can vary depending on context. This is usually where brands can fail to meet the basics of accessibility for low vision and colorblind populations.
The image below is from a brand guide and audit I worked on. The existing colors were designed by another studio for a costly rebrand. None of the three were accessible over white, or 508-compliant, and vice versa (say cyan blue text isn’t accessible over a white background, then neither is white text over cyan blue background). Once the brand audit was performed, I set up three replacement colors that were the most similar, offered the most contrast, and were legible over white.
Now, if only this company had run an accessibility check to begin with, they would have saved thousands of dollars and would not have had to revisit their 40+ page brand guide.
Design Systems and Set Up
Once you know that all of your brand assets are legible and have enough contrast, they need to be set up properly—such as using tags, defining paragraph settings, and including alt text. Both InDesign and your website platform have capabilities to do this, but there must be some form of guidance in order to have a successful integration. There is nothing more irritating than using a screen reader and hearing jumbled text.
And what about the rest of the visuals like iconography, photography, and additional graphics? Those are also a part of the system and should be informed by color and font choices. Take the use of a pie chart, for example. Is there enough color contrast amongst each section to differentiate them? Is your type legible, both size- and color-wise, against the background? Size matters and consistent application across all brand collateral is key.
The pie charts below depict this perfectly. Pie chart A has sections that are not legible against white, specifically that “Dissatisfied 16.67%.” And there’s a strange floating 0% that isn’t tied to any color. We can only assume this is linked to the “Very Satisfied” category. Pie chart B is better in that all colors are 508 compliant against their backgrounds and that the legend is easier to read, yet both pie charts fail to connect directly to their categories. This is problematic because if someone cannot differentiate amongst shades of teal, there is no way to tell the difference between “Satisfied” and “Very satisfied” (see pie chart B). Both pie charts succeed in that they use a white border to break up each section.
Design systems and set up informs how you use your brand, and encourages your organization to make smart decisions about its website and other public-facing materials.
Every image, every graphic, and every piece of content your organization produces is an opportunity to disrupt bias and promote inclusion.
In this day and age, it’s critical to have a brand with a standout visual identity, as well as one that is visually accessible. It shouldn’t be neglected, as Domino’s did, or an afterthought, but a piece of the whole (pizza) pie.
If you’re interested in a brand audit for your company or organization, contact Brevity & Wit to get started.