Accessible Color Considerations

Transcript

Ahmed Chaion: Hello and welcome to WordPress Accessibility Day 2020. My name is Ahmed Kabir Chaion, and I’m working as the business development manager at weDevs. I’m also a regular contributor to the making WordPress documentation design, polyglots accessibility, hosting community learn WordPress, and marketing team. I will be your host for this session.

You’re here for the 8 p.m. talk with Colleen Gratzer. Please feel free to add your questions to the YouTube chat feed, and we’ll answer those at the end.

So, this talk is more like a discussion of color and contrast and why it’s important for designers to think about accessibility as early as possible in the design process, even at the branding stage. Colleen is a award-winning designer with 23 years of experience in branding, print, web design, and development.

Four of those years include being an accessibility specialist. She has proved–provided InDesign accessibility training to the U.S. Department of the Interior.

Her client-based business, Gratzer Graphics, provides design and accessibility services to nonprofits, creative firms, and developers. Through Creative Boost, Colleen hosts the Design Domination Podcast; educates designers and developers about freelancing issues, design, and the importance of accessibility; and offers a website accessibility course and other resources.

She’s a member of the IAAP, which stands for the International Association of Accessibility Professionals and holds a verified certificate of achievement for introductory website accessibility from W3C, with plans to pursue additional certifications, which brings to this session, Accessible Color Considerations. Colleen, the floor is yours.

Colleen Gratzer: Thank you so much. It’s great to be here.

Let me just share my screen. Okay, do you see that now in full-screen mode?

Is that fine? Okay, great.

So, in this presentation I’m going to discuss color and contrast and why it’s important for designers to think about accessibility as early as possible in the design stage, even at the branding stage, and I’m gonna get into why many designers–not just web designers, but designers in general and developers, why they’re reluctant to incorporate accessibility, and then, Who is affected by our color choices? And then, I’ll get into WCAG guidelines about color and why accessibility should be thought about as early on as the branding stage and how accessibility makes you a better designer and problem solver.

A lot of designers are resistant to incorporating accessibility, and I hear all kinds of reasons. They might think, “Only web designers and developers need to be concerned with accessibility.”

This is probably because website accessibility lawsuits have gotten a lot of attention over the past few years, but it does apply to a lot more than websites. In our industry and with color contrast we’re usually talking about apps, electronic documents, and then the text and the graphics and interactive elements that are in them.

“Accessibility is ugly. ” I hear this all the time from designers.

A lot of websites and designs are indeed 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 website is or document, a design, or graphic. “Accessibility means designing with only dark colors.”

Now, I’ve heard this from both designers and clients. In fact, for an email design project where a client wanted the color scheme to be accessible, they initially sent us the color codes for only their darker brand colors, which we didn’t find out about until the middle of the project.

Now, here’s an accessible website I designed and built several years ago. It isn’t ugly, and it doesn’t use dark colors.

And here’s an example of using dark colors together that I found while shopping online. People without vision issues would have a hard time reading this.

I certainly did. It always depends on how the colors are used together, as I’ll get into.

Some designers and developers and their clients think that accessibility only applies to a small population, or only to older people, but worldwide it is estimated that 2. 2 billion people have a visual disability.

One of those could be low vision, and low vision is having best corrected visual acuity at less than 20/40 in the better seeing eye, and this can be due to macular degeneration, cataract, diabetic retinopathy, or glaucoma. Another type of visual disability is color blindness, and color blindness affects 8% of males and .5% of females. Types of color blindness include red-green color blindness, blue-yellow, and there’s even different types of each one, and then there’s complete color blindness.

Some uses of color and contrast can actually affect comprehension either negatively or positively, especially for those with cognitive, learning, and neurological disabilities. Now, in the U.S. there’s 14.8 million people who have a cognitive disability. Unfortunately, I wasn’t able to find a worldwide number on that, but, as you can see, these are not small populations.

These are not small numbers we’re talking about. And here’s another one I hear from designers and developers.

“My clients don’t serve anyone with a disability.” I actually hear this from clients, too.

I mean, you can’t see who’s coming to a website. You can’t see who’s reading your electronic documents.

You might only find out if somebody complains that they can’t get around the site, or they can’t access content in a brochure, or they can’t read something, and they might just go to a competitor instead. The Web Content Accessibility Guidelines, called WCAG for short, tell us how to be compliant.

These are internationally accepted guidelines, and there are three levels of conformance. There’s A, AA, AAA, and they range from minimum to strict.

The typical level of conformance to meet is AA. AAA is a much less common request, so in my presentation I’m focusing on A and AA and focusing on WCAG 2.

1. 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. And that could be text. That could be social media icons, for example.

It could be data graphics. I mean, in this case, the pie chart is conveying data on each piece of the pie, but it’s also conveying information from each piece of the pie to the legend.

Color alone also cannot be the only visual means of indicating an action. Here’s an example where color alone is being used to do that.

Sighted users with or without a disability would not be able to tell that the word “this” is a hyperlink. The blue link text is hardly noticeable against the surrounding black body text.

I mean, we could assume it’s a hyperlink, but that’s if we even notice the color difference at all, which most people won’t. Color alone cannot be the only visual means of prompting a response.

So, for example, a button. Color alone cannot be the only visual means of distinguishing a visual element.

That could be a form-field border, just to show that it’s a form-field border, and it could also be showing a field that contains an error as well. WCAG 1.4.3 Contrast Minimum says that text and images of text have a contrast ratio of at least 4.5:1, except for large text, incidental elements, and logos. Normal text is defined as 14 points or less, or 18.66 pixels, if you’re working on the web, or smaller than that, and it needs to meet a contrast ratio of 4. 5:1 or more, like I just mentioned.

But large text is at least 14 points or 18.6 pixels and bold, or at least 18 points or 24 pixels in any weight.

Typically, you’re gonna see normal-size text used for body text and header and footer text, photo captions, block quotes, navigation menus and hyperlinks, tables and form fields, buttons, form instructions, and error messages. And then, large text will usually be used for headings and sometimes block quotes and buttons.

To check contrast, you simply enter the hexadecimal codes for the foreground and background colors into a contrast checker, and in this example I’m using the WebAIM contrast checker. And then, it will give you the contrast ratio.

With this particular checker you could even click the permalink link under that and then copy the URL from it in case you wanna show this information to someone else or refer back to it later. WCAG 1.4.11 Non-Text Contrast says that user interface components and their states, such as focus and hover and so forth, and graphical images–excuse me, objects have a contrast ratio of at least 3 point– 3:1 against adjacent colors.

And this applies to form fields at their default and at their various states, so it could be a field in keyboard focus. And it could be social media icons.

The WebAIM contrast checker also has a section for graphical objects and user interface components, so it will tell you right there if that passed or failed. Hyperlinks need to meet the same requirements as text against their background, but if color alone and no additional styling, such as an underline, is being used, then hyperlinks will also need to have a 3:1 contrast against the surrounding text color.

The WebAIM contrast checker also has a link contrast checker, where you enter the hexadecimal codes for the link and the body text and the background colors, and then it will tell you if they pass or fail. Now, there are no contrast requirements for logos, images that are purely decorative.

And those could be decorative borders. They could be visual dividers or icons that don’t convey any meaning, inactive user-interface components, such as a button that doesn’t become active until someone fills out all the required form fields, content that is not visible to anyone, images that contain significant other visual content.

So, if you have text that’s unimportant or just happens to be in an image, like this street sign in a photo, that would not have to meet a contrast requirement, unless–in this particular case unless we actually wanna use this image to convey South 2nd Avenue. But other examples would be an image of a magazine article that’s being used decoratively and not meant to actually be read.

And heat maps, which have to use low-contrast colors so that you can see the page content beneath the colors. And then, screenshots.

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, and in this example I’ve used the Coblis color blindness simulator.

And so, I upload a pie chart, and then the color blindness simulator shows how this pie chart, with those particular colors, would look to people with varying forms of color blindness. And you can see there’s quite a few types there.

So, you can see how very different this pie chart would appear to some people. In some cases you can still make out the differences in the legend, but with some types of color blindness there isn’t much of a difference between them visually.

So, once we find issues and we’ve checked for them, how do we resolve them? There’s actually a few things we can do.

We can increase the contrast between the foreground and background. In this example we can darken the light green until it has sufficient contrast, but the change is really drastic, and this might be undesirable in the design.

I mean, it would be for me. It’s actually from my own-brand color palette, and it’s too dark for my taste, so– and the look I’m trying to achieve.

In this case darkening this particular orange from a client’s brand color palette only slightly gives it sufficient contrast and the change is hardly noticeable. Here’s an example of a hyperlink that does not meet contrast requirements against the body text color.

The link contrast checker assesses the hyperlink color against the background and body text colors. Now, the link text is a different color, but it doesn’t have enough contrast to distinguish it from the body text, so it’s not obvious to some people that it’s a hyperlink.

In other words, it’s using color alone, not contrast and not styling, to show that it’s a hyperlink. Now this particular blue is slightly lighter, and it still meets the contrast requirements against the background and the body text, but it is still a best practice to underline links or give them a border bottom in the CSS.

Another way to resolve contrast issues is to use a completely different color. Here, the white text on this orange background of the button does not meet contrast requirements, and so we have several options.

We can change the background color to the dark blue from–this is from my color palette, and the blue gives sufficient contrast against the white. And then, we could change the text to that same blue, which has sufficient contrast against the orange as well, or we can even reverse those colors.

Now, here with these form-field borders the orange does not have enough contrast with the background. Instead of darkening it, though, we could choose another color from the brand color palette that does have sufficient contrast.

In this example with social media icons, these are really light, so we could choose another color from the client’s color palette. Now, with some elements we can use styling to differentiate them.

Going back to the hyperlink example, you know, if the link text has sufficient contrast with the background, then instead of using contrast to distinguish it from the surrounding body text, we could simply add an underline or border-bottom style, or we can add a background color. We could also add a background color to show a field that is in focus.

To show form fields that have an error, we could use a thicker outline and/or one that’s in a different color that has sufficient contrast with the background and the field border default state. So now, let’s talk about how the accessibility of our color choices can affect branding and why accessibility should be brought up as early as possible even at the branding stage.

Number one is that the visual brand integrity can be affected. Now, here’s an example of that.

So, this is the branding of my client-based business, and it uses a light green and gray as the two main colors. Purple is what I want to be more of an accent color.

Now, I developed these colors before I got into accessibility and was even aware of accessibility, so this is all happening after the fact. So, it would have to be a much different darker hue of green as I showed earlier, like an army green, and that would change my brand color palette and the brighter look that I wanna have.

So, you might also need to weigh whether or not the design will end up being too heavy on one color, which, you know, you may not want, so in this case, in order to meet contrast requirements in certain places, I’ve had to change the gray to purple. Now, I don’t care for having so much purple.

It’s more prominent than my primary brand colors, but it does give a warmer feel. Something to consider with your work is, How will brand recognition be affected if you end up needing to use more of the secondary colors rather than the primary ones, or having to darken a client’s primary color palette?

Plus, you don’t want the client’s website to be accessible with a modified color palette but then their other materials use the original, non-accessible color palette. It’s really important that they’re consistent.

It is much more costly to remediate websites and documents and color palettes after the fact when accessibility is an afterthought. That’s not just a financial cost, but also the cost of brand recognition.

I mean, will your client lose business as a result? Because some people may not immediately recognize the branding anymore once these changes have been made.

I mean, color plays a big part in brand recognition. Think about McDonald’s.

What if the golden arches were changed to green? Often, when I’m remediating InDesign files for accessibility, I have to modify the client’s color palette.

In this case, I was provided a fully designed file which needed to be made accessible after the fact, and so you can see here how changing the light green to an army green looks drastically different, gives a different effect, so, again, this is definitely something to consider in the beginning with brand identity design. And sometimes it’s a case of needing to rework the design with different colors, and sometimes the design itself, keeping the existing colors but changing how they’re used, needs to be done.

In this case, I changed the design to use the light green against the purple, and then I used the orange in a decorative way, but changing the design after the fact is costly and time consuming to the client because accessibility was an afterthought. I mean, in these situations you’re revisiting the design process a second time, so it’s almost like the client’s paying for the design work twice.

And it requires the client to review the new look, which adds additional time that they probably hadn’t planned on. Accessibility can affect an organization’s brand values and experience, and this can work for or against them.

Implementing accessibility is the right thing to do, and it leaves a positive impression. It gives a business a good reputation.

When accessibility is ignored, though, it gives the business a negative reputation on diversity, and 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. Accessibility can be good for business.

Seventy-one percent of users with a disability leave a website that is not accessible. Now, color only plays just one part in that, of course, but consider how having an inaccessible website might be potentially costing your client.

For example, a young woman with low vision is looking for pregnancy support on a website. The headings are in baby blue and pink, and she has a hard time reading them because they’re too light against the white background, so she leaves and goes to another site.

A male user with color blindness is shopping for a gift for his wife online, but he’s unable to make out the hyperlinks that go to the products. He leaves and goes to a competitor site.

A legally blind woman wants to make a donation to an animal rescue but finds it hard to read the small light-gray text on the website, so she doesn’t–she doesn’t use a screen reader, and she doesn’t know that she can adjust contrast or text size in the browser on–or her operating system, and so she leaves the site feeling frustrated. Accessibility provides a better experience for all users.

Most people won’t notice that something is accessible, but they will appreciate the benefits. In terms of color and contrast that means enhanced readability and clearly distinguishable hyperlinks and interface components.

Now, here is a horrendous example, and I was shocked to have found this on a county website, a government website, but users without a visual disability cannot read this white on white text. And even with the drop shadow the text fails to appear, and I guess they want you to, too, but, again, all users would benefit from this content being made accessible.

Remember this? Well, users without vision issues, you know, would have trouble reading this.

These form fields would be hard for most users to see or to read or to know where to put–input their information. And here’s an example again with the hyperlink.

Some sighted users and users with a visual or cognitive disability would not be able to tell this is a hyperlink. So, I mean, the blue link text is hardly noticeable against the black text, and we could assume it’s a hyperlink if we even notice the color difference, but again, most people won’t.

But just don’t make people think. Ninety-seven percent of the top one million websites fail a basic test for accessibility.

Having a more accessible website could give your clients a competitive edge, and it also gives you a competitive edge because most designers and developers don’t bring this up, and you’d be the one informing them about it. Addressing accessibility can make you a better designer and problem solver, because design is not about just looking good.

It’s all about communication, and it will add more value to your branding and design work. Okay, so let’s recap some key points here.

Don’t use color alone to convey information. Sufficient contrast is good for everyone.

Check color contrast of any elements that are conveying information. So, your normal text is gonna be 4.

5:1 and large text 3:1. The checker I mentioned was the WebAIM contrast checker, and The Paciello Group also has one that’s called the Colour Contrast Analyser.

And you wanna check for any elements that convey information for how they would look to users with color blindness, and you definitely wanna educate your clients about the importance of accessibility and its benefits. Now, I have a handout that’s available on the website to accompany this presentation and there is so much more to understand about color specifically and, of course, accessibility in general.

To learn more, you can go to my website, creative-boost. com, where you’ll find my Design Domination Podcast episodes, and then design-and accessibility-related articles, and links to other accessibility presentations I’ve given.

And I also have a free guide for understanding and selling accessible websites, as well as a website accessibility course, which will get you up and running quickly with website accessibility. And I have an upcoming accessible branding course as well.

And through my client-based business, Gratzer Graphics, we design accessible publications and websites, remediate other designers’ InDesign files, and provide website audits and consulting. And I’m on LinkedIn, so feel free to connect with me there or in my Design Domination Facebook group.

Ahmed: Thank you so much, Colleen. That was very informative, and I personally also got to learn a lot.

And our viewers, using the live-chat feed of YouTube, have been asking questions, so let me just take some questions for you. We have a lot of questions– we have–time to answer them.

So, the first one, “An earlier speaker mentioned black and white can impact on a segment of the community. Are there any colors that we should be avoiding?”

Colleen: Okay, I’m sorry. Could you repeat that?

Ahmed: Yeah so, are there any colors that we should be avoiding?

Colleen: Well, too stark of contrast can cause problems.

Like, if you have straight black on white, that can actually cause issues with people who have Irlen Syndrome, and, apparently, that can kind of make the text look like it’s moving, so that can be problematic. So, you don’t wanna go for stark contrast, but, yeah, it’s always a case of just checking the contrast of the colors that you’ve chosen.

It’s always about how they work with one another. Like, you could use–you could use black against, you know, a light gray background, as opposed to a white background.

Or you could use a white background with very dark gray text, for example, but, you know, this would apply with any color, too, instead of having, like, super dark or super contrast. Although with–I shouldn’t say that, actually.

It’s probably more of a black-and-white thing but–because with WCAG AAA the requirements are higher contrast, so there–it’s a higher contrast ratio, so it might just actually be for the black and white. Ahmed: Okay, thank you for the suggestion.

So, next question is the question says, “Thank you for bringing some light to the way we should approach to color and accessibility. So, the question is, How much more costly could it be to redo a design because colors weren’t accessible?”

Colleen: Well, in my experience it–sometimes it can cost double the cost of–for the work because of that. That also could–it’s not just necessarily the color.

It’s also involving, you know, relaying out something in InDesign properly, but color is a big part of that. And yeah, it’s if–especially if you’ve got a client who comes to you with, like, a pastel color palette and not much more and you have to come up with, you know, creative ways to get these colors to work to try to maintain their brand integrity.

Or you’ve got to tell them, “You know, we have to change some colors here. ” Ahmed: Okay so, our next question, “Is there any legal implications for the inaccessible websites?” Let’s talk about some legal stuff.

Colleen: Oh, well, I’m not a lawyer, of course, and I don’t play one on TV, but yes.

I mean, there are certain types of clients that need to abide by accessibility laws, but, you know, everybody should just go ahead and start talking about accessibility even if their client doesn’t need to– if there’s no legal requirement, I mean.

Ahmed: Okay, next question.

“Working with design system that are not tested accessibility, is that a challenge?”

Colleen: I’m not sure what you mean by that. Like, a website or–

Ahmed: For a website or– yep, of course.

Colleen: You mean, like, to remediate the colors on it?

Ahmed: Yep. Yep.

Colleen: I mean, it depends on–you know, sometimes it’s a case of changing the color palette, and then just providing the new hexadecimal codes and suggesting what colors need to be replaced with which ones. Like, it’s more of an advisory role and sometimes it’s okay going in and actually making the CSS changes to the site in addition to that.

Ahmed: Okay, great. Thank you for that.

Next question, “Form fields often get very artsy and use colors in accessible ways. What is your approach to color and design for forms?”

Colleen: Oh, with form fields, I mean, you can be– yeah, you can be creative. And even with hyperlinks.

I mean, you can do something–you don’t have to always have–it doesn’t have to be text-decoration underline. I mean, it could be border-bottom, you know?

It could just be–it could be maybe a dotted outline. It doesn’t have to be something that’s just a straight line underneath, you know, all the time.

It could be something creative, and you can still, you know, change that based on whatever the default is, have it look different on focus or on hover, so you can have those look different and get creative with those. Ahmed: Great.

Thank you. So, we talked about hyperlinks.

The next question is also similar to the topic of hyperlink, “Better, that is, more accessible, to use high-contrast color for hyperlinks or underline/border? What about hover state effects?”

Colleen: Yeah, so you wanna make sure that the hyperlinks contrast enough with the surrounding body text, so, like, in the example I showed you have a blue, and then you have black body text. So, it’s gonna to depend on what color the body text is, but you have to ensure sufficient contrast between that.

But then, it also has to have enough contrast between itself– that color used on itself and then the background, because you have to be able to tell–you have to be able to read it, and you have to be able to tell that it’s a hyperlink. And if you just add the–some kind of styling to it and make it really obvious, then you can’t go wrong.

I mean, it’s better from a usability and an accessibility standpoint to do both, the contrast checking and adding styling.

Ahmed: Right. Great. The next few question is more like suggestions coming from you, so the first one is your suggestion on how we can educate clients on accessibility.

Colleen: Okay, yeah. So, I would definitely talk about the benefits.

And sometimes, unfortunately, with clients you have to– you know, you have to talk about money. You have to talk about business and, you know, sometimes that’s what gets people– people’s attention first.

So, you know, you might have to talk to them about how this is affecting their business. Are they losing potentially up to 20% of people coming to their website because their site’s not accessible?

Or you know, they’re–maybe they’re–’cause their documents aren’t accessible. Anything like that, so, yeah, talking about that, talking about why it’s the right thing to do, why it’s important.

You know, a lot of people that don’t have a disability don’t think about accessibility unless, you know, they know somebody that has one. And so, everybody should be having this conversation, because a lot of people think, “Well, it doesn’t apply to me, so it doesn’t apply to my audience, either.”

Ahmed: That’s very true. We’re also seeing a lot of great praises from our audience in the YouTube live-chat feed.

We have a couple more question as we still have a couple more minutes to go. So, some examples from you, Colleen, about websites with WCAG AAA-compliant colors.

Can you think of some website names right away?

Colleen: Oh, no. I don’t know of any offhand, no. And it’s very rare.

It’s very rarity. I mean, I’ve never had a request for WCAG double or triple A, so, no, I can’t think of any off the top of my head. But it’s very rare.

Ahmed: Yeah, perhaps we can take advantage of the question-answer that we have set up on the WP accessibility website, and if you can think of any– I understand that’s so rare.

Perhaps our audience are looking into that. All right, so the last question that I have here so far is, “Do you use rem or pixels to set font sizes?”

Colleen: Oh, always rems or ems, because you never wanna use the font size–you never wanna set the font size in an absolute measurement. You wanna set it in a relative one, so rems and ems.

And even if you do your margin and padding that way, it makes things easier, too.

Ahmed: It’s an absolute pleasure seeing more questions coming up, the enthusiasm from our audience.

So, there’s a follow-up to this question. “If you’re using rem,” which you are, “do you calculate the rem against your browser font size pixel setting for color contrast, or ratios for font differ on that?” Any thoughts? Any thoughts on that?

Colleen: Wait. Say that again.

Ahmed: So, I’m going to repeat that. So, “If rem is used, do you calculate the rem against your browser font size pixel setting for color contrast?”

Colleen: I typically think of a rem as, like, about 16 pixels. I mean, everybody is gonna have their browser sizes set differently, but I typically–like, if I’m look–if I’m working on a site that’s already– that needs to be remediated, right?

It’s already been built, it’s already got everything coded in pixels, the font size in pixels, I typically divide that measurement. Well, I have to think about how I would do that, but I base one rem typically on 16 pixels.

So, if something is at 2 rem, I estimate that to be at, like, 32 pixels. So, if I see something–like a heading that’s 32 pixels, I would say, “Okay, that’s 2 rem.” But there is–and I can answer this later on and provide the link, but there is a rem calculator, rem converter that you can use that will help you do that, convert from pixels to rems.

Ahmed: All right.

Thank you for that information. So, so far the last question says that “Colleen, you mentioned not using color alone to convey information. In the case of that error state on the email input field, does contrast make that sufficient, or does it need an error icon as well?” Talking about contrast.

Colleen: Yeah, so you need to have–you need to make sure that the field that’s an error is gonna contrast enough with the default field, so that could be by color that meets that contrast, or it could be– like, in my example I used a thicker border. It doesn’t have to be red.

It could just be a thicker one, and it doesn’t have to have the icon. But if you use an icon and you don’t use any other styling, like you don’t use any thicker border or anything on that particular field, then the icon would have to meet the contrast requirement.

And if you have something–like, usually you’re gonna see a red triangle, right, with a white exclamation point, for example. Well, the red background of that icon is gonna have to have sufficient contrast with the background, and then the exclamation point is gonna have to have enough contrast between itself and the red background of the triangle, because it’s gotta be able to be seen.

Ahmed: All right, then. Thank you so, so much for the informative presentation and taking–having patience answering all the questions from our audience.

I would like to thank everyone for attending the session with Colleen and myself and–