Color

Lea Alcantara: This episode is sponsored by Craft Commerce, a brand new e-commerce platform for Craft CMS. If you’re a web shop that likes to create custom-tailored websites for your clients, you’re going to love Craft Commerce. It’s extremely flexible, leaving all the product modeling and front-end development up to you, and it’s got a simple and intuitive back end for content managers. To learn more and download a free trial, head over to craftcommerce.com.

[Music ends]

Emily Lewis: Today we’re turning our focus to a topic that is fundamental to design, color. It touches most every person’s daily life. It impacts how products, store fronts, print advertising and of course, websites are perceived. It’s a deceptively simply topic that reflects culture, portray style and even alienate.

Lea Alcantara: [Agrees]

Emily Lewis: Our guide today through today’s complex and nuanced discussion is Geri Coady. Geri is a freelance designer and illustrator with a self-proclaimed color obsession. She’s worked with clients of all sizes and is the author of the Pocket Guide to Colour Accessibility. Welcome to the show, Geri.

Geri Coady: Hi. Thanks for having me.

Lea Alcantara: Thanks for being here. Can you tell our listeners a bit more about yourself?

Geri Coady: Sure. Well, as you said, I am an illustrator and designer. I’m originally from Canada and now I live in the UK with my husband, Simon, and I guess I do love color, I guess, because I am an illustrator.

Lea Alcantara: [Agrees]

Geri Coady: It’s something that I’ve always been interested in, so it’s just one of those things that I have really become passionate about, especially when I’m trying to take it and use it on the web, which is another one of my passions.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Geri Coady: So in terms of other hobbies, I’ve been studying Japanese for a while now.

Emily Lewis: [Agrees]

Geri Coady: We’re going to Japan next month, which I’m very excited about.

Lea Alcantara: Cool.

Geri Coady: So hopefully I’ll see plenty of color in Japan. [Laughs]

Lea Alcantara: Oh, yeah, definitely. I would say that Japan’s design styles are leaning towards the color spectrum. [Laughs]

Geri Coady: Yeah, definitely, definitely, I’m very excited. It’s just going to be, I guess like you could describe it as an assault on the senses, so I’m very excited about that. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Fun.

Emily Lewis: So before we get into talking about the details of color, let’s shake our assumptions, what is color?

Geri Coady: Well, that is also very deceptive. It’s not a simple question. It’s quite complicated, and I think the further you actually research it, the more complicated I think you realize it is.

Emily Lewis: [Agrees]

Geri Coady: So I guess in the most basic description, the spectrum of visible light that we can see is made up different wavelength groups.

Lea Alcantara: [Agrees]

Geri Coady: So each one of those kind of groups of wavelengths is responsible for different colors like we would kind of imagine in a rainbow.

Emily Lewis: Right.

Geri Coady: So you know red, green, blue, that sort of thing. So color is basically what our eyes perceive when we see those wavelengths, whether they’re reflected off of a surface or if they’re emitted as light. So if we think about the topic of color with designers and developers in mind, well, especially designers, CMYK color is what you would find on printed matter.

Lea Alcantara: [Agrees]

Geri Coady: So that’s called subtractive color, so it basically means that it absorbs different wavelengths which is different from additive color, which is what would find on things like television displays, digital displays, computer screen, that sort of thing, where the red, green and blue light is actually added together to reproduce the colors. So it’s a pretty complicated question, but that’s basically what it is and what the difference is between CMYK versus RGB color would be.

Lea Alcantara: I find all of that stuff so, so fascinating because color in and of itself, obviously we mentioned, “Yeah, it leans towards more to the designer side of our things,” but the fundamentals of colors is based on science, you know?

Geri Coady: Yeah.

Emily Lewis: [Agrees]

Geri Coady: It’s super technical. It’s very science-y. Definitely, you can go too far, I think, when you’re trying to read it. [Laughs]

Lea Alcantara: [Laughs]

Geri Coady: Because when I first started to really study color, you just have to draw a line because this starts getting into like math and formulas and all that sort of thing.

Emily Lewis: [Laughs]

Geri Coady: I was like, “I don’t need to know all of that stuff, like that’s just over the top.” You understand the basic things like what matters to us as designers, what matters to us as developers.

Lea Alcantara: Right.

Geri Coady: Unless you’re super interested in working on hardware and screens and that sort of thing.

Lea Alcantara: Right.

Geri Coady: I mean, of course, that’s different, but for us, we just really need to know the difference between different color gamuts like RGB and CMYK, and I guess that a lot of that explains why we can’t see the same colors on screens what we can reproduce on paper, and you know kind of vice versa.

Lea Alcantara: Right.

Geri Coady: So as long as you kind of have a basic understanding of that, I think that’s really all you need to know as a designer.

Emily Lewis: So why is color so important to design, in all areas of design?

Geri Coady: Well, it’s not just an aesthetic thing, which I think a lot of people, especially designers and developers, kind of think it is. It’s not just an afterthought that it’s something you’re going to add, you’ve designed a bunch of wireframes and add the color in later. It’s important because it’s so emotional. It’s got a lot of meaning and messages behind it, different cultures, all that sort of thing, but it can also help create hierarchy in a design. It can help draw your attention to certain areas of the page. It can help the user on their flow through your website. It’s not just aesthetic at all. All that sort of thing is going to affect how a person can use a website. So it’s definitely more interactive. It’s more critical for web design because you can’t really control how a person on the internet is going to view your website, like everybody knows this with responsive design and that sort of thing.

Lea Alcantara: Right.

Geri Coady: In the same thing, like you can’t really control how somebody is going to see your website in terms of color, so it’s definitely very important to think about for that reason in web design.

Emily Lewis: And when you say that you can’t control it, do you mean based on everything from like how someone has their screen set up or their device is set up?

Geri Coady: Yeah, yeah.

Emily Lewis: [Agrees]

Geri Coady: Yeah, so color profiles, you know?

Emily Lewis: [Agrees]

Geri Coady: As you know, there are so many different color profiles for different monitors out there. Designers, graphic designers, are supposed to calibrate their monitors all the time. Some people who are really hardcore about it, they might recalibrate their monitor every day just to get the color reproduction to look perfect on their screens, but the average person, like just any person really, I mean, the majority of people do not do that sort of thing with their monitors, so you have no idea of how old their monitor is.

Emily Lewis: Right.

Geri Coady: You have no idea what kind of environments they’re viewing your website in. So there are just so many different variables out there that you can’t control.

Emily Lewis: Well, given that there’s so much that we can’t control, how do you properly use color on the web?

Geri Coady: I guess proper use of color is not really a term or a word that I would like to use. I would actually say appropriate use of color.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Geri Coady: Or talk about inappropriate use of color, which I think is a lot more important because there are so many appropriate colors out there to use. There could be a million different appropriate colors to use in a project, but there could be one very inappropriate color, you know?

Emily Lewis: [Agrees]

Geri Coady: Or thinking about things like color blindness, inappropriate colors to use would be colors like red and green if a person has red and green color blindness, which we can talk a little bit later. You’re not going to want to use those colors together. So I like to think about saying “proper use of color” could be a little bit restrictive, so I like to kind of talk about it in the opposite sense.

Emily Lewis: And I mean, even gathering based on what you said earlier of being it appropriate beyond just considerations for color blindness, but there will be cultural considerations, what would be appropriate for something that’s targeted to a certain audience that may have their own cultural perceptions about color, right?

Geri Coady: Exactly, exactly, and also a lot of people will ask me what would be a good color palette that it looks appealing, but it’s like that’s a really subjective question.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Geri Coady: It’s just like one person might think of as a nice-looking palette could look absolutely hideous to somebody else, so it is definitely a subjective thing, and color alone is subject to trends. I mean, look at Pantone in their Color of the Year like every year.

Timestamp: 00:10:08

Emily Lewis: [Agrees]

Lea Alcantara: Color of the year, right.

Geri Coady: Like in the way that it’s used in fashion and that sort of thing, so I think there are really just too many proper uses of color in like you need to think about inappropriate.

Lea Alcantara: So when I’m thinking about the proper use of color in the context of the web, it reminded me a little bit about when I was teaching it MacEwan [University] the basics of web design to students, and while they’re graphic designers, they didn’t have context of designing for the web.

And so when I just gave them an exercise without giving them context of web stuff just to see what they would do to “design” a web page with whatever they perceive, it’s interesting how they decided to use color, and then I would ask them, “Okay, so how do differentiate or how do I know whether to click that headline or whether to click a word in that paragraph if the text is all black?”

Geri Coady: Yeah.

Lea Alcantara: And that something that I feel like sometimes we in the industry were here for so long that we just assume that we always start with the default of blue for links or some sort of different differentiation, but proper use of color is the difference between people understanding calls to action, whether that’s a link, whether that’s a button, whether that’s a headline and actually interacting with the page and with the site versus complete lack of understanding of where they are on the page.

Geri Coady: Exactly, it’s another good example I think I’ve seen, which is it doesn’t always work, but I see a lot of print designers designing things for web and they get really excited when they’re given different pages because sometimes they will make all the colors of each page different.

Because I saw a website, it wasn’t incredibly long ago, maybe like two or three years ago, and it was a beautiful website, but every single page had a different color scheme, and it felt very disjointed and I think that is definitely like an improper use of color because it just felt like you never really knew what that brand was, like does that brand supposed to have that color? Does that brand supposed to have this color?

Lea Alcantara: Right.

Geri Coady: So it’s definitely something I think a lot of print designers do have trouble with.

Lea Alcantara: Right, like because color is context, right?

Geri Coady: Yeah, yeah.

Lea Alcantara: Like if you keep changing some standard that you’ve set in one page, then what is the standard? You know?

Geri Coady: Exactly.

Lea Alcantara: How do they know when they navigate to another or deeper into the site without having to search around and think so hard that they can click on a link.

Geri Coady: Exactly, and so many people I think use different just something like a very basic example like button colors, like you said, like a call to action, just different colors throughout the site, and that’s so confusing for a person who might just want to do one task throughout your site and it’s the same. It’s basically the same function, but everything looks different. It can be really confusing, and it’s really unnecessary, I think.

Lea Alcantara: Yeah, I would say absolutely, and I know that you started talking a little bit about print designers tend to go this way, and I kind of want to challenge the fact that we really have disparate ideas over the motivations of print designers and web designers, which is conveying information in a way that people understand what’s going and to take action whether that’s in aesthetic form or in an interactive form.

What confuses me is that sometimes people forget the leap that you need to put emphasis in a certain way and then have some consistency throughout like a magazine or whatever so you understand that the next step is to flip the page, you know?

Geri Coady: Yes.

Lea Alcantara: And the thing is it’s like that’s true whether you’re designing interactively on a web page versus like a magazine or poster where the call to action is to visit the website or to phone a ticket or a stub place, right?

Geri Coady: Oh, for sure, yeah. I’ve definitely seen just as many badly designed annual reports.

Lea Alcantara: Right, right.

Geri Coady: Or something like where again the color looks very inconsistent and it just doesn’t have that sort of flow to it.

Lea Alcantara: So would you say, because I feel like sometimes we try to focus on how, “Okay, web design is so different from print and all these kind of things,” but at the end of the day, user experience exists in all facets of design, right?

Geri Coady: Yes.

Lea Alcantara: And I feel like we shouldn’t give print designers a free pass simply because they’re designing for print.

Geri Coady: No. [Laughs]

Lea Alcantara: Because, for example, in industrial design, wouldn’t you say that color is an extremely important factor in understanding how to use an object or how to navigate through space in an office, for example?

Geri Coady: Yes, yes, definitely for sure. I think one of the biggest things for colors like wayfinding systems, which in a physical space, like that is almost like you’re basically carrying a person throughout a physical space. It’s very comparable to how you would direct a person through a website if you want to carry them through different pages. So it’s definitely comparable.

I guess though in some instances, like if you’re just making like a poster or a brochure, like a one off sort of thing like in print, that’s a different story because that’s going to print and that’s effectively kind of done, like you can’t really revisit it. It’s already out there and you can’t change it.

But I guess in things like wayfinding systems in physical spaces, in industrial design, in websites, in apps or that sort of thing, you have to think about the long term, what doesn’t exist right now? Are you going to have a whole new section of your website down the road that you may need to be considerate about the color choices way beyond the site launch, or is a hospital or something going to add a new wing to their building and currently all the different color wayfinding systems sort of thing, they need to add something new or like in a transportation system or subway system.

So I think you can really compare those sorts of things more because they are more like a living, breathing sort of system whereas some print stuff is it’s just done and finished.

Emily Lewis: So you both have given some really good examples of how color… I mean, what I’m hearing is how color kind of helps a website be successful in terms of taking a user through whether it’s to navigate to new information or to click on a specific link or button, but what kind of impact does color have on the user itself as opposed to how you try and draw them through the site, but how they’re kind of experiencing the site.

Geri Coady: I think if we want to talk about the topic of color accessibility, for example, not everybody views color in the same way. So if you have a color vision deficiency like color blindness or a form of color blindness, I guess one example that usually comes to mind for me is shopping, like trying to purchase a clothing on a website, that sort of thing.

Emily Lewis: [Agrees]

Geri Coady: There are so many websites out there, let’s say, got a photograph of a t-shirt or that sort of thing. If a person has a form of color blindness, they may not actually know like what the color of the product is that they’re buying, and I think that that sort of thing can drive customers away if they don’t really know what they’re buying or if you’d think about something like infographics, I see this all of the time on the internet, chart difference with pie charts, bar graphs, any kind of chart with intersecting lines, they might look really good, but a lot of them, you cannot understand what they are if you have any kind of color blindness or color vision deficiency.

Emily Lewis: [Agrees]

Geri Coady: So I think it’s not just how color can kind of guide you through a website in terms hierarchy and helping you understand what a link is and that sort of thing, because I think a lot of people of designers do understand that. Especially if you are good designer, that’s something that you are aware of, but I think you have to think of it deeper like about color accessibility and that sort of thing.

Emily Lewis: So like the situation you just described with someone who may be color blind and they may not know what color a given product is, what’s the solution for that? I mean, can you say this shirt is red and that has context for someone who may be doesn’t perceive red?

Timestamp: 00:19:36

Geri Coady: Yes. So basically it’s not really a difficult thing. It’s just something that you really have to think about upfront. So it’s one of the reasons why you have to think about color in the beginning stages.

When you’re getting your product’s photographed, when you’re having a content strategists or people, copywriters writing your content for the site’s descriptions, describing what your product is and describing what color it is in plain terms like not fancy color names, so that’s another kind of issue that I have with a lot of things on the internet. Sometimes you’ll see a t-shirt, and I have some great examples of this.

One of the sweaters I saw on a men’s website, I think it was called woodland and sky was the name of the color, so I’m like they had the name of the color listed, but like there is literally no way for a person who could not see color to know what the color that was based on the description. So have a chat with the people who, if you’re looking for like a big clothing kind of retailer, that sort of thing, if you work on a team like that and you see some issue, like talk to the content writers, talk to the copywriters and be like, “Can we just call this what it is? Like if it’s gray, call it gray. If it’s a dark red, call it dark red. If it’s pink…”

Like if you use actual hue names like ones that you’d think of in a rainbow sort of thing, really plain kind of English or whatever other language you’re designing for or if you’ve got any different languages supported on your website, just make it as plain as possible, and it’s just going to make it a lot easier for everybody to understand what is going. It’s the same thing with directing somebody to click the green button to add this to your cart, which you shouldn’t do anyway. But if you do, like you have to just be more mindful of those kinds of things.

Lea Alcantara: I feel like this is like the basics of even when we were talking about mystery meat navigation way back in the day instead of saying like some kind of fancy phrase that maybe if it’s a book website, it’s like a character phrase or something like that in the navigation, but what they’re really trying to go for is Bio, you know? [Laughs]

Emily Lewis: [Laughs]

Geri Coady: Yeah.

Lea Alcantara: We should just have the word, “Bio.”

Geri Coady: Exactly.

Lea Alcantara: How do you navigate these conversations with marketers and brand specialists? Because I understand why they want to have woodland and sky…

Emily Lewis: [Laughs]

Geri Coady: Yes.

Lea Alcantara: Which is…

Emily Lewis: Pretentious. [Laughs]

Lea Alcantara: Yes, but maybe that’s their brand. Maybe that’s what they’re trying to go for, but perhaps, you know. Well, I mean, if I was opposed to it, I would say, “Perhaps put that in a paragraph description, but not in the dropdown.” You know?

Geri Coady: Yeah, exactly, exactly. It just reminds me of another website I saw where it was a search filter, like you said, like you drop down menu like search by whatever color.

Lea Alcantara: Right.

Geri Coady: And every one of those colors, instead of being sorted by red, green, blue, black, it was literally there was like one product under the name – oh I can’t remember the name of it, but it was like just woodland and sky, for example, and they have one product listed under that color.

Emily Lewis: [Laughs]

Lea Alcantara: Right.

Geri Coady: So I think to try to have the conversation with the people who are writing your content and say, “Listen, if somebody does have a color vision deficiency,” and there are so many people out there, and if you’ve got a massive website that sells products where color choice is an option, like you really need to think about it because especially with clothing, because a lot of people aren’t comfortable wearing colors that don’t look good on them or they don’t like, and it can be easy to say, “Oh, don’t worry about it,” or whatever, but a lot of people, they have strong feelings about it, and of course, they do, it’s fashion.

Everybody or a lot of people are just very opinionated about what they’re wearing. So, if you can’t communicate to as many people as possible to what that is, they might just not go to your site, they might go to another site. You might end up actually losing potential customers. So I think if you put it in those kind of terms to like marketing managers and copywriters, I think it’s a good way to kind of maybe tone back that little bit of silliness. [Laughs]

Lea Alcantara: [Laughs]

Geri Coady: Which, of course, they’re deciding it could be a part of their brand, but maybe make sure you’ve got labels in there for search, and make sure that it’s clear somewhere on that page that a person knows what they’re buying.

Emily Lewis: I was watching one of those Discovery Channel brain shows last night and it happened to be on color and color blindness, and this is not like official statistics that I confirmed, but they said something like almost 10% of the population has some sort of issue perceiving color. That’s a huge number.

Geri Coady: Yeah.

Emily Lewis: If you’re missing out on that audience and alienating them.

Geri Coady: Yeah, exactly. It is a massive number of people, and like a lot of people think that color blindness means that you can’t see any color at all, and that is not true. Again, like the way that people perceive color differently, it can vary so much. Some people could have one type of color blindness, another person can have a very slight version of another, but altogether that can really add up. It does.

When I speak at conferences, I will usually ask with a room of anywhere from, say, like a 100 to 500 people if there’s anybody in the audience who’s color blind to put their hands up, and I will always get somebody, like no matter how small the room is, there is always a person who will have a form of color blindness, and that sounds like one-track conferences or two, so it’s not just like they came to see my talk or anything, so it’s going to like attract people who is …

Lea Alcantara: Right.

Geri Coady: Like overall like it is definitely a very, very common sort of thing.

Emily Lewis: Other than color blindness, is there other ways that people have issues with color on the web?

Geri Coady: Well, I think it would be important to talk about not just color blindness as such, but just color contrast, so that people who have low contrast issues and just regular forms of vision problems.

Lea Alcantara: Yeah.

Geri Coady: So I think designers need to understand that if you are designing with color blindness in mind, you’re not only helping those people, but you’re also going to help a whole group of other people, like maybe your Nan who just might have regular vision problems because she has old age like that sort of thing. I think the more you think about color blindness and color contrast issues, you’re just going to be more inclusive for as many people as possible.

Lea Alcantara: Yeah, that definitely make sense, especially if you’re designing a site that’s info heavy or text heavy.

Geri Coady: [Agrees]

Lea Alcantara: I wear glasses, I wear contacts, but I don’t really have any other general visual impairments regardless, but if I’m reading something way too high contrast where like let’s say there’s a ton of red or something, that’s going to tire out my eyes way more and faster than if there was a better contrast choice in that type of thing, and I’m not color blind. That’s something that impacts “the majority” of non-visually impaired people, and that’s just regular contrast or regular stuff like that.

Geri Coady: Exactly.

Lea Alcantara: Oh, and another thing too, we had that episode on Accessibility 101 and there are a lot of people who have a variety of different types of disorders where like certain animations or things really bother them physically.

Geri Coady: [Agrees]

Lea Alcantara: And if you’ve got weird color contrast and then you add pattern on top of that, even if it’s not animating, that kind of thing could add distress to certain people or certain populations unnecessarily, you know?

Geri Coady: Yeah, yeah, for sure.

Lea Alcantara: So those types of things are definitely something you have to consider, especially like again the context of the audience needs to always be there. For example, if it’s going to be a Japanese anime site where there are going to be a ton of color because there are a lot of characters and all those kind of things, that’s almost like assumed, but if you’re going to be designing a website for a health services company and you’re going to assume that there’s going to be a variety of people with various ailments going to visit that site, you’re not going to have the same type of leeway.

Geri Coady: Exactly, and this is why it’s so important to think about your audience when you’re making color choices like upfront, and that’s why it’s something that you need to think about, and you need to think about color right from the beginning of your project. It’s not something that you can think about later and be like, “I’m just going to design a bunch of wireframes. I’m just going to think about color later. It doesn’t really matter.” Because it does matter, it can affect so much and it’s just so important to think about it. It needs to be right up there. Designers always talk about, “Oh, I need to have copy upfront. I need to have a content. I need to have the photography.” Well, you also need to think about the color upfront because that can inform so many other choices that you’re going to make down the road.

Lea Alcantara: [Agrees]

Geri Coady: Like thinking about responsive design, so it could be easy to say, “Okay, well, on smaller screens, we’re just going to shuffle this around and we’ll put this button on different backgrounds when everything scales down a bit.” But is that color choice going to work if shifts around on a mobile device, like that sort of that? So you need to think about it upfront and be more thoughtful about it. It makes the whole process go a lot easier and it’s going to give a lot less problems in the end toward the end of your project instead of worrying, “Oh, we haven’t thought about designing for color blindness. We haven’t thought about color contrast problems, that sort of thing.” At that point usually it’s too late. Everybody has run out of money and there’s no time to fix anything.

Timestamp: 00:30:29

Lea Alcantara: Yeah.

Geri Coady: And sometimes that’s when stuff just never gets fixed and they just get left, and it’s stuff that can be avoided or at least minimized if you just have that conversation upfront.

Emily Lewis: Well, how do you make your color choices? Do you have like a process that you follow or a certain checklist you make sure you go through each time?

Geri Coady: Well, it’s something that I think I’ve been working on for a while because there are so many different routes to kind of take with this, and I guess one of the processes that I’ve been working on lately has been, you know, the first thing to do is you need to research. It’s the first step of pretty much any project. It doesn’t matter if you’re talking about color or anything.

So if you’re working for, say, a company and they’ve got branding guidelines and that sort of thing. Of course, it’s important to take that into consideration because they might have things laid out for you that you already have to follow so you’re not going to have much leeway in coming up with new kind of palettes. You might have to stick with what they’ve got.

But I guess if you don’t have that sort of thing, you need to think about your audience like we’ve been talking about. You need to think about potential cultural differences. You need to think about any geographic regions and that sort of thing, and whether certain color choices will be inappropriate, then you could kind of like strike them off your list. So it’s a way to kind of minimize your choices at the beginning and make it a little bit easier to choose a palette, but you also should do a lot of competitor research. So I think a lot of designers will come up with like color schemes and they look way too close to other competitor’s colors, which is definitely an issue.

Lea Alcantara: [Agrees]

Geri Coady: And a lot of people might think, well, it’s not really a big deal, but there are companies out there who actually have particular colors copyrighted, which sounds crazy but it is actually true. So if you are trying to design a website for a jewelry company that sells like wedding rings, you cannot use a certain shade of blue because Tiffany has that copyrighted, and you will get in trouble if you use that color.

Lea Alcantara: Right.

Geri Coady: And I have seen it before, like I’ve seen a website that has been like, “Oh, well, you know, we’ll just use like a Tiffany blue on our jewelry website,” and it’s not a good idea. So you might think that you are trying to be like that company, but it can get you in trouble. So do your research, try to figure out which colors are not appropriate, which colors you can’t use, and then think about what colors you can use, so at that point, I would like to just play around with things.

So if I’ve got photography from people already at that point, I like to use that for inspiration, especially if you know that a photograph is going to be used in a website or if there’s an illustration that’s been done, that it’s supposed to go on the site, you can just draw a lot of inspiration from that sort of thing, taking into consideration your audience and everything that you’ve kind of made notes on up until that point, and I guess at that point, what I would do, if I play around and I got like a few different color schemes kind of worked out, I might take a few samples of those and do some sample color contrast checks, which I think is really important to do before you go back to your client and say, “Hey, I’ve got these cool color palette ideas.” You need to kind of make sure that those colors are going to work.

So I like to use Lea Verou’s contrast checker, which is fantastic. So at this stage in the process, I would take a sample button, maybe put some texts over it, and see if my idea for a button color or call-to-action color is going to have enough contrast with the text, and I’ll do a few different pairs of different things like backgrounds, color with body copy, background color of a button with the label, that sort of thing and just make sure that it’s going to be okay, and then at that point, you can kind of present your color concepts to your clients and be like, “Here are some concepts,” and do not show them in a mockup because that is definitely going to throw them off. They’ll be more interested in looking at the design than the color choices.

They’ll be like, “Oh, but I don’t like how that text looks.” It’s like, no, you need to just present it like a palette, and like just show it in basic steps. So at that point, if you can get approval for one of those palettes, at least you know that you’re going to be able to make that work, because you’ve already done a few contrast checks, so eventually you can work it into your design. Then like as a final step, I do like to do a bit of research like user testing.

It’s always great to have somebody who is color blind to take a look at your site once you have everything in place, and you can always do like another contrast check just to make sure that like the developers haven’t done something in such a way that you might not have planned, just to catch on any final problems with some color contrast, and those basically what my process is for color, like you could go much deeper than that, but that’s generally how I would do it these days.

Lea Alcantara: Sure. What I love about that entire process is that you’ve done all the testing and research way before you sent anything to a client.

Geri Coady: Exactly. [Laughs]

Lea Alcantara: I feel like a lot of designers sometimes shoot themselves in the foot if they send something to clients right away, and of course, they’re not designers, they’ll look at it and they’ll say, “Yeah, I like it,” and then if you do testing after that…

Geri Coady: Exactly.

Lea Alcantara: And then you have to go back and tell them like, “Actually, we’re going to have to tweak this, that or the other,” then they’ll either get annoyed confused. Just avoid all of that altogether.

Geri Coady: Exactly, because if you test major issues upfront, it’s a lot easier to say to a client, “Okay, you need to understand like this is like the concept and it could change a little if we implement this color scheme and we find that we might need to make a few adjustments.”

Emily Lewis: Right, right.

Geri Coady: But it’s not like you’re going to come back and say, “Actually, we can’t use that particular shade of purple because we didn’t test it and it’s actually not contrast compliant, and we actually need to make a drastic change.” Like it’s just much easier to just do a few checks upfront, it doesn’t take long, and once you get in the hang of doing it, like once you get the hang of doing it, it kind of becomes second nature.

Emily Lewis: Right.

Geri Coady: You don’t need to kind of have a checklist because you already kind of know what you need to do before you talk to a client.

Lea Alcantara: For sure. Now, I kind of want to talk a little bit more about that testing part. So we kind of established that testing is a good thing and that we should do all that before going to a client, but we also established that everyone perceives color even those without any particular color deficiencies differently, and I feel like everyone in the web has heard that story, the 41 shades of blue from Google.

Geri Coady: [Laughs]

Lea Alcantara: So with all of that in mind, people looking at color differently in general and really, you’ve got every shade in the rainbow to consider, how much data is enough to make a solid color decision, like when do you stop? What is too much?

Geri Coady: Yeah, I think when I heard that story I think I probably rolled my eyes a bit. [Laughs]

Lea Alcantara: Right.

Geri Coady: Because I just feel like, like you said, the very fact that people do perceive color so differently makes it even more ridiculous.

Lea Alcantara: Right.

Geri Coady: So like 41 shades of blue, and how do we know that people can even tell the difference between those apart, like it’s just…

Lea Alcantara: Right.

Geri Coady: I think if you’ve got a more significant shift in a color like literally, is it a blue button or is it a green button? Or even if it’s like if you want to be teal versus blue or something, I think that’s different, but if you are spending that much time worrying about 41 different shades of blue, don’t tell me you don’t have bigger fish to fry, like it’s the only way. [Laughs]

Lea Alcantara: Right.

Geri Coady: Like maybe you should be spending that time making sure something else is much accessible and maybe Google can afford to do that because they have the resources and that’s something they can do, but if you’re just like a small team, you need to draw the line.

Lea Alcantara: At one point, does intuition and our personal years of experience come into play?

Geri Coady: Yeah, exactly. I think, again, as long as it’s not an inappropriate use, then you could be there forever trying to find whatever the best color is.

Timestamp: 00:39:55

Lea Alcantara: Right.

Geri Coady: But there may not be one. Like I said, like for a large company like Google, maybe they saw some results from that, but I mean, for the average client, for the average website, you definitely should be focusing your time on something else, I think. Try to make your website more accessible in other ways. Like Derek Featherstone with Simply Accessible, he says that accessibility is a journey, not a destination.

Emily Lewis: Right.

Geri Coady: And I think we really need to think about that, like you need to think about ways to make your site as accessible as possible, but whatever you do that’s going to help is better than not doing anything at all. So your time is valuable and you need to think about more constructive ways I think to kind of deal with A/B testing.

Lea Alcantara: So what is a constructive way, because I feel like sometimes A/B testing can be really deceptive and we make decisions where it’s like, well, this performed better, but does that actually mean it performs better overall? Does that actually mean it’s a better perception of the brand long term versus some short-term thing, for example? I know a lot of people test, “Okay, green buttons versus red buttons for a call to action, which one is going to get the most presses.”

Geri Coady: [Agrees]

Lea Alcantara: But should that be the priority versus is this on brand as well, like how do you interpret A/B testing? Like for example, okay, this blue is getting a lot of action, but is there a situation where you’re like, “Well, maybe it is, but we’re not go that route because X.”

Geri Coady: Right.

Lea Alcantara: Like how do you interpret the A/B testing?

Geri Coady: I guess it kind of comes down to like what’s more valuable to you as a company, like is it more important to have your brand recognition and that sort of thing, or is it more important to just simply have that kind of conversion on a call-to-action button. Everybody is different. Personally, I would try to find a happy medium, something else is going to reflect the brand that’s also going to attract customers and lead them to the right place to buy a product that they want to buy.

Lea Alcantara: Right.

Geri Coady: So I think you just need to be a little bit and not go crazy about it, you know? [Laughs] And just try to make the right decision based on your company, I guess.

Emily Lewis: So with all that in mind, is there any single approach or like a magic bullet for using color that can give you a really solid foundation for basically all users?

Geri Coady: That is definitely a difficult question because I would say there’s not a magic bullet to using color, and I think that’s what people find color. Many designers say like, “Oh, I’m really bad at coming up with colors,” because I think it’s because they’re given so many options. There are so many opportunities. There are so many combinations. There are so many different schemes to use.

Or I mentioned trying to figure out which colors are inappropriate from the beginning are going to help you make better more appropriate color decisions, but on top of that, if you’ve got things like, let’s say a chart or an infographic like I mentioned earlier, if you can combine that color with the pattern and make sure everything is clearly labeled, that’s something that more users are going to be able to understand. You’ve got a link and it’s a red link in a black paragraph of texts.

Lea Alcantara: [Agrees]

Geri Coady: Somebody with low color contrast vision is probably not going to be able to see that red link in that text so make sure it’s underlined. So I think it’s not so much about the magic bullet to using color, but more about how you actually use it in different circumstances like in infographics, like in links. Just make sure that link is underlined so that person knows what to click. Make sure that there are no things like the color names on t-shirts or products or clothing, that sort of thing. If you can give more information in those circumstances rather than just relying on color, then that’s definitely going to create a more positive experience for all users regardless of what their color perception is.

Emily Lewis: Now, in terms of implementing color on the web, what is your process when you are working with the developer? Do you give them hex values, RGB values? What is your approach to hand over, and does the developer stick with what you gave them or do they implement it in their preferred way?

Geri Coady: Well, what I’ve been doing recently, I haven’t been working with too many developers recently because I have been focusing on illustration, but on the last big project I did, what I did was I personally went and I just set up a small style guide. I just coded everything out very basic myself. I put all the colors in. I did use HSLa [hue, saturation, lightness with the alpha channel], and I just made sure that any elements of that website that that developer needed to use and implement in a full prototype was already there so that I just made little swatches with all the codes already there so they could just copy it and use it, so there’s absolutely no confusion about what they need to use.

It’s not like in the days where you had like a Photoshop file and the developer would have to go in and actually sample that color, like I’ve seen that happen so many times, and I think that’s where you end up with having so many inconsistent colors. You might have like five different or ten different instances of color when in reality, you just need the one.

Lea Alcantara: Right.

Geri Coady: I think if you as a designer are able to just go in and set that up in a small little style guide yourself and deliver that to the developer and it would just make things go so much smoother because it’s you kind of driving that style guide and delivering it to the developer just makes things a complete breeze.

Lea Alcantara: So I’m curious why did you use HSLa versus something RGBa.

Geri Coady: Well, I’ve been using HSL or HSLa for a while now because it’s a bit more intuitive to use, so it’s great if once you get used to it, you can actually change it in the code without having to really jump back. Like if you needed to, you can change it in the code, especially if you’re somebody who likes to design in the browser without having to jump back into, say, Photoshop or Sketch or a color picker kind of app sort of thing, and figure out what the hex code or the HTML code for color is.

So everybody who might not be aware, HSL is hue, saturation and lightness. So the hue value is a number on the color wheel from 0 to 360, like 360 degrees, so 0 is pure red and any of the other colors in between would be like green, blue, purple, yellow, that sort of thing. The saturation value is a number between 0 and 100 where 0 is 0% saturation or gray, and a 100 is a 100% or fully saturated, and then for the lightness value, you have a number between 0 and a 100% where zero is black and a 100% is white. So you can actually see if you go in and start to play around with this, if you know that you want to have a lighter red, you can just go in and say, “Okay, well, I want to increase the lightness,” I can just type it into the code into that value, and it’s done, like you don’t need to jump back and think about the hex code and be like, “Oh, I have no idea.”

Like you can’t really wrack that out in your head, like you need to go into a color picker. So that’s why I really like HSL, and of course, with HSLa, you have an alpha channel so the value there with 0% is fully transparent and a 100% is fully opaque. So I just think it’s such a powerful model, it’s just great.

Emily Lewis: What do you think about some of the… like Sass – gosh, I’m not even sure what the right term is, but like you can transparentize something. You can…

Lea Alcantara: [Laughs]

Geri Coady: [Laughs]

Emily Lewis: Oh, I can’t even remember all of them. That’s what I’ve used before. What do you think about developers relying on adjusting through some sort of preprocessor syntax versus adjusting the HSL values?

Geri Coady: I would say I don’t have a great opinion on this mainly because Sass is something that I’ve kind of stayed away from for as long as possible. It’s not that I’m not really interested in Sass. It’s just that I try to not do my own developing, unless it’s something with my own website. I prefer to work with developers these days. But I would say it’s probably better to kind of have a value already in place in the style guide because if you’re giving the developer the option to kind of change the transparency in Sass or whatever, you’re just kind of introducing more instances of more inconsistencies.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Geri Coady: So the more you kind of keep it in the style guide in basic CSS as much as possible, I think you have a less of a chance of just adding really unnecessary things.

Lea Alcantara: Interesting. I’m going to slightly disagree with you here. I definitely think that we should have standards set, especially we don’t want to have like 41 different shades of blue at the end of the day when you started off with one shade to work with, but I feel like when you’re working on the web, we need to step away from perfectionism, and we do need to have an open discussion and open line with the developer so that they can make intelligent decisions. For example, do we really need to give them the actual shade of gray when they could do a percentage of black and they can intuitively understand how to do that with those types of things? I feel like there’s a happy medium here in regards to dictating like set colors.

Timestamp: 00:50:26

Geri Coady: Yeah.

Lea Alcantara: Because generally speaking, the way I, like at least me and Emily do it, is we start off with like our main like, say, three colors for the particular brand, and then manipulate using CSS the various shades of those instead of like dictating every single particular opacity for all of that.

Geri Coady: Right.

Lea Alcantara: And I feel like that is I think a good way to move around, especially if there the base colors are set and that’s not changed, then at least any particular variation is still based on all of that as opposed to like let me find something completely different to work off of.

Geri Coady: Yeah, for sure, and again, it’s kind of up to, I guess, the designer and the developer and whatever they prefer to do.

Emily Lewis: Right.

Geri Coady: And like I said, I haven’t really worked in Sass because it’s not something that I’ve ever done and that have kind of just worked with some developers who haven’t really used it, but whatever works best for that particular project is definitely a personal decision.

Lea Alcantara: Absolutely.

Emily Lewis: As the developer who gets the stuff… [Laughs]

Lea Alcantara: [Laughs]

Geri Coady: [Laughs]

Emily Lewis: I appreciate having the ability to know what the base value that I can work with and then I can set transparency to it, but it’s really nice when someone tells me exactly what I need to do.

Geri Coady: [Laughs]

Emily Lewis: Because the last thing I care about, like I want it to look good in everything and I want it to mirror what Lea’s vision as the designer is, but I’ve got twenty other things to worry about.

Geri Coady: Yeah, yeah.

Emily Lewis: So if I have twenty specific values that Lea is like this is what to use, that will be like sweet.

Lea Alcantara: Right.

Geri Coady: Yeah.

Emily Lewis: So there’s also that.

Geri Coady: Yeah, I mean, there’s like the…

Emily Lewis: It’s less of me to have to think about.

Geri Coady: Yeah, exactly, and I mean, like there are developers who like to have that sort of thing laid out and then there are also developers who are more design inclined or they’re more creative developers…

Lea Alcantara: Right.

Emily Lewis: [Agrees]

Geri Coady: And they like to kind of have that kind of openness and kind of creativity and not have that kind of restriction. So you just need to think about what does that developer that you’re working with like and what do they prefer.

Emily Lewis: [Agrees]

Geri Coady: And like you said, have that open conversation. You need to know like what is the best route to take in this particular project with a developer you’re working for.

Lea Alcantara: Yeah, absolutely. Wow, this is such a massive topic that we tackled here, and I feel like we’ve literally just brushed the absolute surface of it all, but before we go, do you have any final pieces of advice regarding choosing an attractive and accessible color combination?

Geri Coady: I would say one of those important things is to just try to not make any assumptions about anything. Don’t assume that a person can see a color. Don’t assume that a person is going to be able to see such a light contrast text. If you aren’t sure as a developer about a particular color choice, you can ask a designer or just ask or shout out on Twitter and just say, “Is there anybody out there with color blindness who might want to look at my website?”

And a lot of people out there are just going to say yeah, they are super willing to review your design, and also I would say overall my two biggest points would be to check your work in a contrast analyzer before and after, and always make sure you have key pieces of information if you’re designing with color, especially charts and labels and that sort of thing.

Emily Lewis: So when you are testing, what are you favorite tools that are out there for people to use?

Geri Coady: Well, my number one tool for designing, because I am such a visual person, I design and illustrate, Color Oracle is my favorite. It’s a color blindness simulator, and that simulates the most severe forms of color blindness. That is really indispensable for me. I also use Lea Verou’s contrast checker, which I mentioned earlier, and that is very, very useful for checking the contrast ratio between text and background colors.

Emily Lewis: [Agrees]

Geri Coady: And if you need help with color schemes or any of that sort of thing, which I know can be super difficult, I would recommend an app called Spectrum, and that is fantastic for coming up with different types of harmonious color schemes if you don’t really have that confidence, or if you just want to play around with it, it’s very flexible and I would recommend all three tools for sure.

Lea Alcantara: Fantastic. But before we finish up, we do have our Rapid Fire Ten Questions so our listeners can get to know you a bit better. Are you ready, Geri?

Geri Coady: I hope so.

Lea Alcantara: [Laughs]

Geri Coady: [Laughs]

Lea Alcantara: First question, morning person or night owl?

Geri Coady: Oh, morning person.

Emily Lewis: What’s one of your guilty pleasures?

Geri Coady: I would say Japanese enka. If you don’t know what it is, look it up, but don’t judge me. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: What software could you not live without?

Geri Coady: Illustrator.

Emily Lewis: What profession other than your own would you like to try?

Geri Coady: I would like to be a barista, which is crazy, but I would love to do. It would be fantastic.

Lea Alcantara: What profession would you not like to try?

Geri Coady: Oh, I would not… Oh, I feel like I’ve just thought about this, probably anything to do with math. [Laughs] So like accounting. [Laughs] Which is a shame because I deal with my own accounting.

Emily Lewis: If you could take us to one restaurant in your town, where would we go?

Geri Coady: I’m going to actually say my hometown, and I would say Mallard Cottage, which is in St. John’s, Newfoundland, Canada.

Lea Alcantara: Very cool.

Emily Lewis: What kind of food is that?

Geri Coady: It’s kind of like home style, very Newfoundland kind of inspired, very hardy, very local, everything is kind of sourced locally, it’s fantastic, and you should all go.

Lea Alcantara: If you can meet someone famous, living or dead, who would it be?

Geri Coady: Oh, that’s really difficult. I have a lot of people, but I’m going to say Robert Smith from the Cure.

Emily Lewis: If you can have a super power, what would it be?

Geri Coady: Probably flight. I think to fly would be amusing.

Lea Alcantara: What is your favorite band or musician?

Geri Coady: Oh, the Cure. [Laughs] I know the answer to that one. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: Okay, last question, pancakes or waffles?

Geri Coady: Definitely waffles.

Emily Lewis: [Agrees]

Lea Alcantara: Very nice.

Geri Coady: Belgian waffles.

Lea Alcantara: Oh, it’s specific. [Laughs]

Geri Coady: [Laughs]

Lea Alcantara: So that’s all the time we have for today. Thanks for joining us, Geri.

Geri Coady: Thanks.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Geri Coady: You can find me on Twitter @hellogeri, and you can also find me on my website at hellogeri.com.

Emily Lewis: Awesome. Thanks again, Geri, this was great.

Geri Coady: Thank you so much for having me.

[Music starts]

Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients. Today’s podcast would not be possible without the support of this episode’s sponsor! Thank you, Craft Commerce!

Emily Lewis: We’d also like to thank our partners: Arcustech and Devot:ee.

Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both! And if you really liked this episode, consider donating to the show. Links are in our show notes and on our site.