In this presentation, you’ll find out:
- Some misconceptions about accessibility,
- How your audience benefits from accessible design,
- How your organization benefits from accessible design,
- Color and contrast guidelines, and
- How to check for color and contrast issues.
Transcript
In this presentation, I’ll talk about designing with accessibility in mind. I’ll get into misconceptions about accessible design, how your audience benefits from accessible design, how you benefit from it, some guidelines that pertain to design and how to check colors.
Myths about accessible design
But, first, I want to dispel some myths that a lot of people have about accessible design.
“Only web designers or web developers need to be concerned with accessibility.”
You might think only web designers or web developers need to be concerned with accessibility. But accessibility applies to more than websites. For instance, it also applies to apps, electronic documents, text, graphics and the interactive elements in them.
“Accessibility is ugly.”
A lot of websites and designs are in fact ugly. But they’re not ugly because they’re accessible. They were just poorly designed. Accessibility has nothing to do with how visually attractive a document, website, design or graphic is.
“Accessibility means designing with only dark colors.”
One time we designed an email and the client wanted to have an accessible color scheme. They initially sent us the color codes for only their darker brand colors. They thought we couldn’t use any of their lighter colors and I hear this from a lot of designers too. But it actually depends on how the colors are used together.
Here’s an accessible website I designed and built a few years ago. It isn’t ugly and it doesn’t use only dark colors.
Audience benefits of accessible design
Let’s get into how your audience benefits from accessible design. Your audience is made up of potentially 20% of people with a disability. It could be less, it could be more, especially, if you particularly serve people with a disability.
Some of the people who are affected by our color choices are people with a visual disability such as low vision.
Low vision may be caused by macular degeneration, cataract, diabetic retinopathy or glaucoma, to name a few. Low vision could mean that someone can’t see things in the center of their vision, on the sides, maybe they can’t see in low light or they have a blurry or hazy vision.
People with color blindness are also affected, which includes 1 in 12 males and 1 in 200 females. Someone might be born with color blindness or it could occur as a result of a head injury.
I know a color blind designer whose family—both males and females–have different types of color blindness.
There are several types of color blindness. One type is red-green and that’s the most common form, and there are four types of that. Green looks more red or red looks more green and less bright. There are two other types where someone can’t tell the difference between red and green.
Here, the original photo is on the left and the one on the right shows how someone with red-green color blindness would see that same photo. The color blind designer that I mentioned, took my Accessible Design course, and I used this as an example in there, and he jokingly said to me he indeed does not see the difference between these two photos.
Blue-yellow is another form of color blindness. It’s less common and there are two forms. They make it hard or impossible to tell the difference between blue and green, yellow and red, or yellow and pink.
Here we have the original photo on the left and the one on the right shows how someone with blue-yellow color blindness would see it. Note how the blue building looks more green, the green building looks more gray and the yellow building looks pink.
Complete color blindness is rare and it affects men and women equally. Here we have the original photo and then how someone with complete color blindness would see this.
People with a perceptual processing disorder are also served by accessible color choices. A perceptual processing disorder is not actually an eye issue. It’s really a problem with the brain’s ability to process visual information.
Irlen syndrome is a type of perceptual processing disorder and that’s sometimes referred to as scotopic sensitivity syndrome or visual stress.
According to the Irlen Syndrome Foundation, this disorder affects 14% of the U.S. population and includes some people with learning difficulties, autism, attention and concentration issues and others.
To someone with Irlen syndrome, a stark black and white contrast that’s used for text can cause the text to appear to be blurry, floating, have a halo effect (or like another effect has been applied), moving, wavy, shaky, at an angle, swirling or parts of it might even disappear, as you can see here.
People with cognitive, learning or neurological disability also benefit from accessible color choices. Certain colors can actually help with comprehension.
All sighted users with or without a disability are affected by our color choices.
Otherwise, we might end up with text that looks like this. Can you read that?
Or this. This text fails to appear, I guess they want you to too.
We might end up with a button that is not only hard to read but looks like an inactive button, which means it doesn’t become active until you fill out all the form fields.
Why you should design with accessibility in mind
Let’s get into why it’s important for you to design with accessibility in mind. I’m talking about besides this being the right thing to do because sometimes people don’t understand other benefits to it.
Revenue
The first reason is revenue.
When it comes to a website, 71% of users with a disability will leave a website that’s not accessible. Where do you think they go? They go to a competitor’s site and they may or may not return to your site.
Let’s look at a few examples here of how this could play out.
Let’s say there’s a legally blind woman who goes to your website and she’s trying to understand how your service can help her but she finds it hard to read the small gray text. She doesn’t use a screen reader, so she zooms in on the text in the browser. But it’s still too light for her to read. So she leaves the site feeling frustrated and you just lost a sale.
How about a man with color blindness, who goes to shop on your site for a product. He’s unable to make out the hyperlinks to products because to him they don’t look any different from the body text. He leaves and goes to a competitor site where it’s much easier to make a purchase.
Brand recognition
The second reason is brand recognition. Not keeping accessibility in mind when creating your brand color scheme can affect brand recognition.
If you have to change some of your colors, later on, to make them be accessible, to work together, if those changes are drastic that could result in people not recognizing your branding. Will you lose business because some people may not immediately recognize your branding? Think about McDonald’s, what if the golden arches were changed to brown?
Here’s an example of what I mean with one of my websites. The branding of my consulting business uses light green and gray as the two main colors. Purple is what I want to use as more of an accent color. The green heading you see in the first screenshot, that’s after I had darkened it. But it still does not meet contrast requirements. It would actually have to be a much different darker hue of green, like an army green.
That would have changed my brand color palette and the brighter look I wanted the overall design to have.
Consistent branding
Addressing color and contrast issues doesn’t stop there. You don’t want your website to use an accessible color palette and then your other materials, like your documents have the original non-accessible color palette. It’s important that they’re consistent. That will affect the integrity of your visual branding.
Not keeping accessibility in mind when designing can negatively affect your reputation. When you don’t consider potentially 20% of your audience, it comes across as we don’t care about being inclusive.
There’s a great saying by Ekaterina Walter: “If we do not intentionally include, then we will unintentionally exclude.”
That can give you a negative reputation.
Not only that, but people with a disability are three times as likely to avoid that business and twice as likely to dissuade others from doing business with it. We all know how much word of mouth and reviews on Facebook or Google can help or hurt a business.
Cost of remediation
When you don’t design with accessibility in mind, you end up with the cost for remediation—and that means to fix it and make it accessible. It is much more costly to remediate a design, a website and documents after the fact–when accessibility is an afterthought—than it is to incorporate it into the design process.
When I’m remediating InDesign files for accessibility, I have to modify the color palette, although, I avoid that as much as possible. But you can see here how changing the light green to an army green looks drastically different.
Accessibility is definitely something to consider even in the beginning with brand identity design.
Sometimes it’s a case of needing to rework the design with different colors.
Sometimes the design itself, keeping the existing colors but changing how they’re used together. In this case, I changed the design to use light green against purple and then used orange in a decorative way.
Again, changing the design after the fact is costly and time consuming because accessibility was an afterthought. You’re now revisiting the design process and that also adds additional time that you have to review the design.
Color and contrast guidelines
When it comes to color and accessibility, there are several guidelines that apply. The Web Content Accessibility Guidelines, called WCAG for short, tell us how to be compliant.
There are 3 levels of conformance: A, AA and AAA. They range from minimum to strict.
The typical level of conformance to meet is AA.
1.4.1 Use of color
One of the WCAG guidelines that deals with color is 1.4.1 use of color, which says that color cannot be the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. Some examples of those would be text—so headings and body text, pie charts, line graphs and hyperlinks.
1.4.3 Contrast minimum
WCAG 1.4.3 contrast minimum says that text and images of text that are normal size must have a minimum contrast ratio of 4.5:1 against their backgrounds. If it’s large text then it only needs to meet a minimum of 3:1 against the background. Large text is at least 14 points and bold or approximately 18.66 pixels and bold or at least 18 points or 24 pixels, in any weight.
If you’re looking to adhere to WCAG AAA (the strictest level of conformance and that’s rare) then normal text would need to meet a 7:1 ratio or greater and large text would need to be 4.5:1 or greater.
Normal size text is likely to be your body text, sidebar text, running headers and footers, captions, footnotes, graph text, hyperlinks, table text, form fields and buttons.
Large text is likely to be used for headings, infographic text and maybe table headers.
There is no contrast requirement for logos or decorative elements that don’t convey meaning. These are decorative borders or decorative icons, bullets, quotation marks used in pull quotes, inactive user interface components (a button that is not able to be clicked until all required form fields are filled out), or text that happens to be part of an image that isn’t trying to convey that.
In other words (in these examples) unless we’re trying to use the photo of the street sign in place of the words South 2nd Avenue, or unless we want the words in the book photo to be read, then these images of text do not need to meet contrast requirements.
Heat maps don’t have to meet contrast requirements. Heat maps have to use low contrast colors so that you can see the page content beneath the colors.
Screenshots don’t have a contrast requirement.
1.4.11 Non-text contrast
WCAG 1.4.11 non-text contrast says you need at least a 3:1 ratio of contrast against the adjacent colors for user interface components and their various states, such as hover and focus and graphical objects. That means that hyperlinks need to meet the contrast requirement for text, at the size that they’re being used against the background. But they also need to meet a 3:1 ratio against the adjacent color, meaning the color of the body text. Otherwise, styling such as an underline is needed to show that it’s a hyperlink. Also, hover and focus states.
Hyperlinked social media icons are another example. Form field borders are another example.
Graphical objects that convey meaning, such as pieces of a pie chart because it’s conveying meaning between the square in the legend with the corresponding pie piece.
Checking contrast
To ensure that we’re meeting these requirements we want to check the contrast of the colors that we’re using and how they’re being used.
What we do is paste the hexadecimal codes of the foreground and background colors into a checker such as WebAIM’s contrast checker. That checker will then give you the contrast ratio of that color combination, and it will let you know if it passes or fails for normal or large text, or for graphical objects and user interface components, and for AA or AAA conformance.
There’s also The Paciello Group’s Colour Contrast Analyser app that you can use to input those hex codes, or you can also use RGB values, or you can sample color. That you can do anywhere on your screen. You just open it and then click the eyedropper icon, and hover over the foreground color that you want to sample, and then do the same for the background color.
I do want to mention though, that I don’t find this to be as precise as actually using hexadecimal codes or RGB values. In some cases, the difference is enough to affect whether a color combination passes or fails.
I find that this app is extremely helpful when you need to sample color from a tint of a color, say 50% of a color.
Word
If you’re using Word, you can go to your colors palette from within a paragraph style, for example. Make sure that you select the second option at the top, and then choose the RGB sliders option, and then you’ll see both the RGB values and the 6-digit hex code there.
If you’re using Powerpoint, you can go into the theme colors—and it has a very similar menu to Word—just select that second option again and then RGB sliders, and you’ll have the RGB values and the hex code.
InDesign
InDesign is a bit trickier. You just go to your swatches panel and double click a color, and if it’s not already in RGB mode for the color mode just change that over, even just temporarily and then you’ll get your RGB values. Below that, you’ll see the hex code. If you don’t want to save it, just don’t save it.
Canva
In Canva, it’s super easy. You just put your cursor in the text that you want to get the color value for, and then on the left side the colors appear and when you hover over them it will show you the hex value there. You can do the same thing for an object as well.
Checking for color blindness
Besides checking contrast, we can check to see how something would look to someone with color blindness. We can check for this by using a color blindness simulator.
I like the Coblis Color Blindness Simulator and here’s that. I’ve uploaded a pie chart and the color blindness simulator then shows how it would look to people with different types of color blindness.
If we compare them all together, you can see how very different these appear to different people. In some cases, you can still make out the differences in the legend. But with some types of color blindness, there really isn’t much of a difference between them visually.
There’s also an app that’s called Sim Daltonism. You open it and then it has this black outline which you see on the screen there. You can place that anywhere on your screen and then change the menu options to show varying types of color blindness.
In Adobe Illustrator, you can go to view and then proof setup, and then you’ll have 2 options to show different types of color blindness. (You can also do the same thing in Adobe Photoshop).
I’ve probably thrown a lot at you in this presentation but I hope that you enjoyed it and learned a lot.
Let’s wrap up by just going over a few key points.
- Thinking about accessibility in the design process saves time and money.
- Accessible design is good for everyone.
- Accessible design is good for business.
- Don’t use color alone to convey information.
- Check color contrast.
If you’re looking for accessibility services such as accessible branding, publications, websites, remediation or accessibility audits. You can go to GratzerGraphics.com.
If you’re looking for accessibility training, I offer that through my other business Creative Boost.