062: Your Brand Colors are Failing You, Allagash Kurkuma

By /

Listen

In this episode, we dig into color contrast, different ways it can be measured, and approaches for managing and maintaining accessible color palettes.

Mentioned in This Episode

Transcript

>> CHRIS HINDS: Welcome to Episode 62 of the Accessibility Craft Podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company and the proud creators of the Accessibility Checker plugin. In this episode, we dig into color contrast, different ways it can be measured, and approaches for managing and maintaining accessible color palettes. For show notes and a full transcript, go to accessibilitycraft.com/062. Now on to the show.

>> AMBER HINDS: Hey, everybody, it’s Amber. I’m here today with Chris,-

>> CHRIS: Hey, everybody.

>> AMBER: -and Steve.

>> STEVE JONES: Hello, everyone.

>> AMBER: We are going to be talking about color contrast today, but what are we drinking?

>> CHRIS: We are bringing back Allagash after a little while. For anyone who doesn’t know, they’re a brewery that is based out of Portland, Maine, and close to my old stomping grounds on the East Coast back when I was in the restaurant industry, which is a story for another time. We used to bring in and drink a lot of their beers. Even did beer tasting menus with their stuff. I’ve rarely had something bad from this brewery. I feel like they do a good job. We’re going to be trying Allagash Kurkuma today, which is a Saison-style beer that has fresh turmeric added to it. For anyone who doesn’t know, a Saison is a pale-colored ale-style beer that’s usually pretty bubbly and should have some fruity, spicy notes, and is usually bottle conditioned, like fermented in the bottle a little bit. Hopefully, we get a little complexity, a little fruitiness.

>> AMBER: We have a can.

>> CHRIS: Yes.

>> AMBER: It’s not a bottle. It’s fermented in the can?

>> CHRIS: I guess so. I don’t know.

>> AMBER: What does that actually mean? I don’t know what that means. It’s fermented small just in this little batch as opposed to in some steel container somewhere and then they bottle it?

>> CHRIS: Sometimes I think it’s both. You might get some fermentation in the tank and then they finish it in the bottle, and then they stop the fermentation at some point.

>> AMBER: That impacts the flavor when it’s fermented in smaller– Maybe it’s not as strong?

>> CHRIS: Maybe, maybe not. I don’t know. I’m not a professional brewer. We’ll see what it tastes like. I do like the vibe of this can. It has very colorful bright oranges and blues, and there’s a-

>> AMBER: Purple.

>> CHRIS: -little plant there on the side. That doesn’t look like a turmeric root though. I don’t know if that’s supposed to be a hop or what it is.

>> AMBER: It’s all abstract shapes and colors.

>> STEVE: Looks like grapes.

>> CHRIS: Yes, maybe.

>> AMBER: Yes, it does kind of.

>> CHRIS: I’ve got my Accessibility Craft pint glass here.

>> AMBER: All right. We’re going to crack–

>> CHRIS: Shop.equalizedigital.com

[laughter]

>> AMBER: Right into the microphone.

>> STEVE: Right into the microphone.

>> AMBER: I don’t think you’re supposed to get that close to your mic. You broke the podcasting rules. All right, Chris is going to give us a pour.

>> CHRIS: Yes. Oh, it’s very pale, like straw yellow. I’m going to go a little faster so I get a little bit of the head.

>> AMBER: Have you ordered yourself a pint glass, Steve, yet?

>> STEVE: No, no. I don’t know what I did to this beer, but it’s blowing up on me.

>> AMBER: Oh no, it’s all coming foamy on the top.

>> CHRIS: Allie, the alligator is happy. She’s swimming.

>> AMBER: [laughs]

>> STEVE: That is some foamy beer. What a head on it.

>> AMBER: Okay, wait, you said Allie was a she. I always think Allie is a he.

>> CHRIS: You do? I don’t know. Maybe Allie is just androgynous.

>> STEVE: There you go.

>> AMBER: I guess alligators do have genders, but well, where they have sex.

>> CHRIS: Yes.

>> STEVE: It’s a cartoon character.

>> AMBER: I think Allie is– I always say he, but it’s funny that you said she. This smells yeasty to me. When I smell it, it smells like bread.

>> STEVE: Yes, it smells like bread, definitely.

>> CHRIS: Oh, yes.

>> AMBER: Do you smell any turmeric?

>> STEVE: No.

>> CHRIS: No.

>> AMBER: This is weird because I eat turmeric all the time, but it’s always mixed in with other things, so I don’t know if I could place what turmeric smells like on its own.

>> STEVE: Oh, it’s pretty strong.

>> CHRIS: Yes.

>> AMBER: Yes?

>> CHRIS: It’s got a strong smell. It’s definitely like if you smelled it, you’d be like, “Oh, that’s turmeric.” Like, I feel like I get a little bit of banana.

>> AMBER: Banana?

>> STEVE: Banana. That’d be the tropical, right?

>> CHRIS: Orange peel. On the nose.

>> STEVE: I used to do these little shots of apple cider vinegar and turmeric. It was like a mix. You just do one every day.

>> AMBER: Is that like a healthy thing?

>> STEVE: Yes, I guess.

>> AMBER: That sounds horrible.

>> STEVE: It was so nasty. I had to hype myself up for it every time.

>> CHRIS: Ooh.

>> AMBER: All right, Chris took a sip. I guess that means we need to be drinking. I never smell or taste the death that Chris does, but I know he like went through this whole wine and all the tasting stuff with food at the Culinary Institute of America. They trained him to taste stuff and I’m all like, “Okay,” when he says something–

>> CHRIS: Surprisingly full-bodied for the color is what I immediately noticed. It’s thick. At least it feels that way to me. In terms of texture.

>> AMBER: Yes, it doesn’t have like a light beer mouth feel or even like a– the color of this reminds me a lot of like a Blue Moon kind of beer. Blue Moons feel a lot lighter than this.

>> CHRIS: Yes. Yes, it’s definitely thick. I feel like it’s got good overall balance between the different elements. I’m getting a little bitter. I’m getting a little acidity. It’s not hitting me over the head with any particularly strong flavor, which is interesting.

>> STEVE: Which is actually what I prefer. This is pretty good.

>> AMBER: Yes, it’s subtle. It’s not a punch-you-in-the-face kind of flavor. I still don’t know if I get the turmeric, but maybe that might just be because I don’t know what turmeric is supposed to taste like.

>> CHRIS: Yes. That’s the thing that’s interesting about this is I don’t really get the turmeric at all. I agree with you.

>> AMBER: It may [inaudible] [crosstalk], yellow I guess.

>> CHRIS: I just feel like it’s really balanced. What surprised me about this too is it isn’t particularly fruity, even though they say it should be based on their description. Maybe a little banana, but it’s definitely not super citrusy. I’m not getting any other tropical fruits; mango, pineapple, anything like that. It’s very mellow.

>> AMBER: They say tropically crisp. I don’t think tropical applies to this flavor profile at all. We’ve had other beverages where it felt– it was floral or it was more fruity. We have a really nice beer from Odell right now in our fridge that I picked up that I hadn’t tried before, which– I’ve tried a lot because we used to live in Fort Collins where Odell is from. It’s super tropical the moment you open it. This, I don’t get tropical at all.

>> STEVE: This is just kind of a beer.

>> CHRIS: Yes.

>> AMBER: Yes. It says earthy, it does have an earthy profile to me. I get that a little bit. What would you pair this with, Chris?

>> CHRIS: I don’t know. It’s interesting, right? Because it is pretty full-bodied I feel it could stand up to something heavy. It’s not super acidic or doesn’t have a super strong flavor. What immediately comes to mind for me is I would have this with water crackers and brie or something.

>> AMBER: Like a cheese plate?

>> CHRIS: Like a soft fatty cheese, I think is what I would put with this particular beer. I think if you had anything like grilled or seared or heavily caramelized or had any kind of really strong flavor, the food would overtake the beer entirely because this beer doesn’t have a very strong character to it, it’s just really full-bodied and balanced. I feel like it almost needs something subtle to go with it.

>> STEVE: Like a pizza?

>> CHRIS: Yes, maybe a pizza.

>> AMBER: Or a salad.

[laughter]

>> AMBER: A salad. This is the girl beer.

>> STEVE: A salad?

>> AMBER: You can go order a beer and a salad at a restaurant.

>> STEVE: Beer and a pizza.

[laughter[

>> CHRIS: You can’t go wrong with that.

>> AMBER: Actually, with the flavor, what I think is it seems like it needs something tart to cut it a little bit to me. When you said a cheese plate, I could see that maybe, especially if you had a sweet–

>> STEVE: Yes, something sweet.

>> AMBER: Like a jam or something also with it. What made me think of a salad is I’m imagining this flavor contrasted with a balsamic or a dressing that’s a little tangy and sour. I think they would blend really well and differentiate at the same time.

>> STEVE: Yes.

>> AMBER: I don’t know if that’s a thing, but that’s what I think in my mind when I’m having this.

>> STEVE: You have a lot of beers with your salads?

>> AMBER: Yes.

>> CHRIS: No.

[laughter]

>> AMBER: No. I don’t have a lot of beer all the time. When I said we have some beer in our fridge, I’m pretty sure I bought that six-pack a month ago.

>> STEVE: It’s good. I don’t know.

>> AMBER: I’m a vegetarian person, so I eat lots of salads when I go to restaurants-

>> STEVE: Well, there you go.

>> AMBER: -because sometimes we go places that appeal to the other people in my family, but the only choice I have is a salad. Yes, that does not stop me from having beer.

>> STEVE: I think it’s good. I don’t really drink it much more than on this podcast, but I’m a simple beer guy, I like it simple and it feels simple to me.

>> AMBER: We’ve occasionally done with this, a, “Would you buy it again?” We’ve been working towards redesigning our website and we’re probably going to move Accessibility Craft into that. There was a conversation about whether we should give beers stars. everyone was like, “No,” but I’m like, “I think we could give it thumbs down, thumbs up, thumbs in the middle,” emojis, like that.

>> STEVE: Yes.

>> CHRIS: We need a wiggly hand.

>> AMBER: Well, I don’t know if there’s an emoji for that. Is there?

>> CHRIS: I don’t know. There probably isn’t.

>> AMBER: There’s a just, this is okay.

>> STEVE: Not an official.

>> AMBER: Where do you all land? Are you a thumbs up on this one?

>> STEVE: Yes.

>> AMBER: Yes? I think I am.

>> CHRIS: The bubble structure and the full-bodiedness of it, despite it being lighter on the palate for me makes it a little unique. Normally, I don’t know, it’s kind of a puzzle in that way.

>> STEVE: It’s always hard too because I just want to burp a bunch when I drink these-

>> AMBER: When you drink beer?

>> STEVE: -and we’re doing a podcast.

>> AMBER: Just subtly mute your microphone.

>> STEVE: Burp, yes.

>> AMBER: I realized I was looking back through our past episodes as I was planning and I realized we haven’t really talked– like dedicated about color contrast and some of the challenges that come up when you have a client that comes to you with a very light color palette or a color palette that literally just fails completely. Someone actually this week asked that question in our Facebook group, we have the WordPress accessibility Facebook group. I was like, “Let’s just have a podcast conversation about it.” I thought we should talk about color contrast today. You guys up for that?

>> STEVE: Yes.

>> CHRIS: No. No, come up with a new topic.

>> AMBER: [inaudible] [crosstalk] a new topic.

>> CHRIS: Come up with a new topic on the spot. Just kidding. Amber, for people who are new to accessibility or just aren’t well versed in this, what is color contrast and why does it matter?

>> AMBER: Basically color contrast is the measure of luminance between two different colors. it comes into play most, especially with text, but it can also impact UI elements by which I mean things like the borders around an input field in a form, or if you have an icon that is functional and not decorative, like an icon for Facebook that links over to Facebook, that would be a UI element.

In the web content accessibility guidelines, there are some different guidelines, both an AA and an AAA that have specific– you can measure a contrast ratio between colors. That’s kind of what it is. I might pass off to Steve just a second to explain what that is and how it’s measured, and the difference. Basically, why does it matter? Because if your contrast is too light, people with low vision or maybe even people with typical vision, but that are looking at your website on a phone outside on a sunny day, will not be able to see everything very well. I’ve even seen somewhere the text was so light gray that I was like, “I can’t read this on my computer.” I opened the dev tools and I changed the color because it was something I really wanted to read and I had to make the color code darker. It will limit people’s ability to interact with the website or read the content.

Steve, do you want to explain a little bit more about how color contrast is measured and the difference there?

>> STEVE: Yes. I can give a high-level overview. I don’t want to get too nerdy about the formula that goes into it. This is not a math podcast. Like Amber said, color contrast is measured using a mathematical formula that generates a contrast ratio from the brightness and color, or as Amber said, luminance; difference between the foreground and background colors. The contrast ratio ranges from 1:1, which would be no contrast. White text on a white background to 21:1 which would be maximum contrast, which would be black text on a white background.

>> AMBER: Then, it kind of just goes in between the two as you change colors?

>> STEVE: Yes, within that range. Yes, totally. Then if we break it down between AA compliance and AAA compliance. AA compliance will cover people with mild to moderate visual impairments. This contrast ratio of at least 4.5:1 for normal text, which is below 18-point regular or below 14-point bold, and 3:1 ratio for large text, which would be 18 point and above for regular fonts and 14 and above for bold fonts.

Then on the AAA side, this will cover people with significant visual impairments. For normal text, it’s a 7:1 contrast ratio. for large text, it’s a 4.5:1 contrast ratio.

>> AMBER: The UI elements, it’s 3:1 is usually what we’re looking for on the UI elements.

>> STEVE: Right.

>> AMBER: There are a bunch of tools. I don’t think anyone’s doing mathematical calculations, right? Everybody just googles. We can probably link a couple of them in our show notes. Google color contrast thing. You put your two hex codes in and it tells you the number, which is super helpful.

>> STEVE: Yes, yes.

>> AMBER: I will say too, I have another link. It’s kind of old. It’s almost 10 years old, but from Nielsen Norman Group who does a ton of actually scientifically-based research on that. They have a good article that talks about low contrast and how it hurts websites and user experience and that kind of stuff. We can include that in the show notes.

[music]

>> ADVERT: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit Publish. A WordPress native tool, Accessibility Checker provides reports directly on the post-edit screen. Reports are comprehensive enough for an accessibility professional or developer, but easy enough for a content creator to understand. Accessibility Checker is an ideal tool to audit existing WordPress websites, find accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis.

Scans run on your server so there are no per-page fees or external API connections, GDPR and privacy-compliant, real-time accessibility scanning, scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password-protected sites, view site-wide open issue reports, and more. Download Accessibility Checker free today at equalizedigital.com/accessibility/checker. Use coupon code “accessibilitycraft” to save 10% on any paid plan.

>> STEVE: I feel like there was a trend there for a while on websites, the minimal websites and there was just this trend to make the text as light and gray as possible.

>> CHRIS: Yes. Shout out to Genesis circa 2010 to 2015 era.

>> STEVE: Yes, exactly.

>> CHRIS: All that stuff. I remember that looking super trendy and I remember even back then before I really understood this stuff, I was looking at that style and I was like, “Wow, this looks so sophisticated,” with the super light colors and everything looking washed out. It was definitely a trend for a while.

>> AMBER: We have a client right now that we’re in the process of redoing their stuff and they came and their website text was light gray on a white background. Their main body text. I was just like, “Why?” You talked about the whole how we’re currently measuring color contrast. I think it could be interesting to talk just very briefly about WCAG silver, which is a 3.0 version of WCAG. There are proposed changes with that to how color is measured and guidelines and that kind of stuff. I don’t know if either one of you wants to jump on those or if we could just–

>> CHRIS: They’re doing a new color contrast algorithm and I’m seeing this thing thrown around called APCA. Does anyone know what that stands for? I haven’t been able to find what that acronym actually stands for anywhere.

>> AMBER: Wait a minute. Let me see if I’ve got it in–

>> CHRIS: While you’re looking that up, I’ll explain the limited amount I know about this because we’re obviously all still testing against WCAG 2, and just keeping one eye on the future.

>> STEVE: I’ve got it.

>> CHRIS: Oh, you got it. Okay.

>> STEVE: Advanced Procedural Contrast Algorithm.

>> CHRIS: Okay. Okay, so very straightforward.

>> STEVE: At least that’s what ChatGBT tells me.

>> CHRIS: Okay.

>> AMBER: Well, got to thank ChatGBT for that bit.

>> CHRIS: Thanks, ChatGBT. It’s probably right. What’s interesting about this new thing that I’ve been reading is it’s not just taking basically two criteria into account, like just the two colors and comparing them. It’s going to factor in what kind of font you’re using, font size, colors of elements around it. I don’t know. It seems more nuanced, but I don’t know if that is going to translate to automated checks very well. Like how is a new automated check going to factor this in?

>> AMBER: It’s still mathematically based so it’ll factor it in. There’s a helpful link that I can put in the show notes where you can look at the color contrast, the subgroup, and the things that they’ve been working on. On the GitHub for WCAG 3, you can look at the guidelines that are going in, and then if you click over it goes to Google Docs for each one where they’re doing stuff like saying how it maps to WCAG 2, like if it’s the same or different and that sort of stuff. If you’re really interested in diving into this, you can watch as this is coming out. There are also some drafts on the WCAG 3.0 support resources on the W3C are still available as well.

One of the things they’re changing, they’re literally going to have one called Visual Contrast of Text as opposed to just Color Contrast. They’re breaking it out and being a little bit more clearer, which I think is good. There’s been a lot of instances where there’s been controversy around this because the way they’re measuring some things that currently fail WCAG 2 would pass in WCAG 3. An example of which is orange with white text. On my beer can here, I’ve got Alligash and white text on this orange background, and I bet you if this were on a website and I were to color contrast that it would fail WCAG 2, but I suspect it would pass WCAG 3.

We’ve even had a client, we had a client recently ask us this because we flagged stuff and they were like, well, “What about this other thing? Because it passes in that.” Yes.

>> STEVE: It sounds like in its luminance calculation that currently the luminance calculation is the full spectrum. We use the same calculation formula for the whole spectrum. It sounds like it’s going to segment out the spectrum a little bit and have maybe different values for that. It says, “Luminance calculation, the calculation of the luminance of the background and the text colors, unlike the simple luminance calculation used in WCAG 2.0 or 2.1 uses a more complex model that better accounts for human visual perception, particularly how we perceive lightness and contrast in different parts of the color spectrum.”

>> AMBER: I think it’s possible it might be better. I don’t know.

>> CHRIS: It certainly sounds more complicated.

>> STEVE: Yes, it does.

>> AMBER: There have been instances and this is when it’s been hard. Where a color with green doesn’t pass WCAG 2, but everyone who looks at it, or a color with orange or something, like the white and orange, it looks really readable. Then you reverse the white text to a black text and it technically passes, but we all look at it and go, “It seems harder to read.” I think that’s what they’re trying to solve for with this.

>> STEVE: Well, it’s interesting too. When it talks about how the eye perceives color, it’s trying to evaluate how a human–because right now it’s a programmatic computer calculation. It’s not taking into consideration, our eyeballs. They were talking about how the human eye perceives contrast considering factors like non-linear response of low vision in low light conditions, which you mentioned earlier, like if you’re outside looking on your phone and the varying sensitivities to different colors. I guess our eye has a different sensitivity response to each color.

>> AMBER: Yes. Some colors are easier to see than others. I saw this recently in an article about the solar eclipse, which will have happened by the time this podcast episode comes out, but it was on NASA’s website and they were talking about why you should use a red flashlight instead of a white flashlight because of how your eyes respond to the difference in red versus white light and that kind of stuff. That is, I think, to that point, right? That we don’t perceive every color equally.

>> STEVE: Yes. You can see it in your home security cameras, when you use the night vision on a home security camera, it’s using red LEDs to project that light.

>> CHRIS: Yes. The other thing that I appreciate with this is that it’s font-dependent, not just font-size-dependent. Thinking about you could have something that maybe technically meets contrast, but if it’s in a certain type of font, it may not actually be super legible.

>> STEVE: Like a script.

>> AMBER: Yes.

>> CHRIS: Like a script or something that looks like handwriting.

>> AMBER: Or really light and really thin. There are some of those fonts that are, it’s like a one-pixel line. A question, going back to that, that client asked us is, “Can we just use WCAG 3? Can we ignore the fact that it fails 2.2/1.2.0,” because it’s the for all that, “Just use 3 and not change our colors?” What did we tell them?

>> CHRIS: What’s interesting about this, is it seems like there are instances where something that would pass this new APCA check would fail the current standard or vice versa. It doesn’t seem like it’s just really cut and dry, this standard being more rigorous or something. If APCA was more picky than WCAG 2, probably the answer would be, yes, because you’re guaranteed to meet the current standard, even if you follow this new, more restrictive one. It actually seems like maybe this is another way around.

>> STEVE: You could have an opinion on which way to go, which is better. Two, there’s an argument too, do we have tools to properly even evaluate that at this point? Maybe that GitHub does have something I could use to actually evaluate this. Then you got to think about the legal implications, right?

>> AMBER: Yes. That was what we told them, which was, “No, don’t use WCAG 3,” because all of the laws that are out there that we’ve seen are 2. they’re measuring against WCAG 2. All of the checkers, There have been lawsuits in the United States where it’s literally said, “It has WAVE errors.” WAVE is checking against 2. so, you know, the lawyers are using that tool.

There’s a really good article we can include in the show notes from Eric Eggert who is an accessibility professional from Germany. He used to work at Knowbility, the nonprofit here in Austin, that focuses on website accessibility. He’s done some work with the W3C. He was literally like, “This is not ready yet.” The thing I fall back on, and what I told them too, is, “Yes, there’s a timeline.” Well, actually, there’s only a timeline for having a finalized draft of WCAG 3. There’s not even a timeline for publishing.

The WCAG 2.2, granted COVID played into this a little bit, but at the same time, it was delayed from when they said it was going to be published by more than two years. At this point, I feel like WCAG 3, if they’re going to have a draft in two years, it’s never going to be published for five. A lot changed. The first versions– I actually had an interesting thing because there was a draft blog post in our website that we had never finalized. Our content specialist wrote and it was waiting on me to review. Just in case anyone’s wondering, I am often a bottleneck. It sat there for a year. Then when WCAG 2.2 got released, I was like, “Oh, we should put this. What’s changed?” I was like, “Oh, I can start from this blog post.” The success criterions were totally different. Not all of them, but a lot of them. It’s just things change a lot between the draft mode and the final published. I couldn’t advise a client to go with the 3 knowing that.

>> CHRIS: Well, the update on this one article from util.net was actually put out yesterday, a year ago, 2023, 03-28. This was a year ago. They said, “WCAG 3.0 still isn’t ready. In fact, there haven’t been any meaningful updates to the draft since this article was initially published.” I don’t know if that’s changed since this update was shared. The proposed charter for the new WCAG working group has a completion date of Q2, 2026, which is probably unrealistic considering minor updates to WCAG 2.0 took between 5 and 10 years to release.

To think they’re going to release a new standard in three years, it’s probably not going to happen.

>> AMBER: No. We’ll probably have WCAG 3.0 15 years from now.

>> CHRIS: It’s just way too early.

>> AMBER: I think shifting gears a little bit, let’s talk about that question that we got in the Facebook group. What do you do if you get a client or you’re working in-house at your company or your university and the brand colors don’t sufficiently contrast? Do either of you have any thoughts about what people can do on that front?

>> CHRIS: I feel like our approach has been pretty solid in this respect. We provide them with this grid of possible alternative colors to their current ones that would work for accessibility and achieving sufficient levels of contrast in a design. Usually, when they see that grid, they see that the colors that we have to change typically aren’t all that different from their native colors. Maybe a couple of shades darker, but still, very much looks like their brand. Amber, correct me if I’m wrong. I think you’ve done this. I think you’ve even loaded their homepage on the browser and stuck some of those hex codes into the browser to mock up what their homepage might look like with some of these colors defined as a couple of shades darker. I feel like I’ve seen you do that.

>> AMBER: Yes. I’ve done that for some of our remediation clients. It’s so much faster than creating a whole design in Figma if you just need to change one hex code somewhere. It’s like a cheat. Do that and then you use Blipshot, which is a Chrome extension to just take a full-page screenshot. Then you’d be like, “Here’s what it would look like if the hex code was different.” Total cheat but a nice one. Yes, I’ve done that.

I think the thing that is sometimes hard when you get the brand colors, this came up with a website we built where they had a light green. The light green worked with black, but it didn’t work with white. There were some instances where they wanted to use the green. Then we came up with like a WCAG green, which is a little darker. When you put the two next to each other, they look very different. When you have the light green on the buttons with black text and then above it somewhere else on the page, the darker green, that’s just text written in that color green, it doesn’t act noticeably. I can’t tell the difference visually.

I do think sometimes it’s helpful to tell clients if they really push back about adjusting their colors, they’re like, “Oh, this will feel different,” then I’ll usually say to them, “How about if we put these in the initial design? Then once you see it, if it feels like it doesn’t work, we can adjust.” They’re usually pretty responsive to that. Then once they get it, they can’t really tell the difference between the little bit of a shade change.

>> STEVE: Have we had any hard pushbacks on color?

>> AMBER: Yes. We have a client, their logo includes the word one. They have, I don’t know, dark gray or something text for the first part. Then the “one” is white text on a light blue rectangle. That’s the way their logo is. They really pushed back because we were like, “We cannot do this white text on light blue everywhere. Your logo is fine. Logo doesn’t need to have color contrast. It’s fine.” We ended up, there was one part on the homepage in the Hero section where they were just like, “It has to match our logo.” There was a sentence that included the word one, and they wanted the one to look exactly like their logo. We definitely got pushback and it ended up launching and it still looks like that. Everywhere else on the website– it’s just one spot.

It happens where they totally push back. Colorado State University, we’ve done a bunch of work for– Apparently, I need a drink. Please. [coughs]

>> STEVE: Yes, more beer. Drink break, everybody. Chug the rest of your beer.

>> AMBER: Hopefully Chris will edit that out or not. He’ll leave it in.

>> STEVE: No, leave it in. It’s good.

>> CHRIS: We’re leaving it in. We’re doing it live.

>> AMBER: Get rid of my cough, maybe. We have a client, Colorado State University, where they’ve been very public about this, that they’ve been trying to work on their university brand colors; green and gold are the primary, and then orange is their top preferred secondary. Then they have all these like teal and yellow and lime green and a bunch of stuff that also doesn’t work very well. It just takes a little bit of creativity in how you do it. Then you do end up with probably a more monochrome. The green works fine, it’s a dark green. Then it’s a lot of green and white or maybe gold on the green because that works. Then the other stuff, like the teals or the orange or the limes, it has to be done with lines or non-functional icons or other decorative accents to pull in those other colors. It can fundamentally change the appearance of a brand.

I just looked at that same client with the light gray text. They have like a full rainbow but it’s all bright colors and they were using them on white backgrounds. We basically were like, “Either you need to go for kind of a dark mode design where you have dark backgrounds so that you can continue to have text in these colors,” or we ended up choosing– they had a blue and a green that contrast. Now their website is almost all blue and green with a few little decorative accents in the other colors, but it’s definitely not the rainbow that their current website looks like. It does change the feel.

>> STEVE: Yes. You can have colors that don’t contrast with each other in your color palette, but then it comes to a point where you have to have some kind of guidelines on how those colors interact with each other, right?

>> AMBER: Yes. I like the eight shapes as a contrast grid where you can go plug in all the colors, and basically, that puts every color on the left side and the top and creates a square, like a matrix and it will tell you if they pass or fail on each one. I’ll do that for every client. I find that to be really helpful. Then we give it to our designer and we’re like, “This is how you’re allowed to use the colors. These ones can be used together and these ones can’t.”

By the way, as a rule, we do not accept anything that’s AA18, which means large font. It has to pass AA because I don’t want to have to get nitpicky about what font size is on mobile just for the color contrast. We only do AA and AAA. We will not accept, “Oh, this is fine for large text.”

>> STEVE: Well, that’s interesting you bring that up too because the end user can control the font size, right? To some degree, like if the site’s coded properly. If it passes at a larger font size and then they actually reduce their base font, if they don’t have a 16-point base font in their browser and we’re using REMS or EMs or something, and they’ve actually manually modified their base size and it’s actually smaller, then it would fail for that one user, right?

>> AMBER: Yes. I think it’s always better to do that. The thing that’s interesting about color contrast is this is a really great example of something that happens usually before the website is even designed or like even built. It’s something that should be addressed during the design process. I look for that. I did a design review with our designer yesterday and he had used a color that didn’t pass contrast for the little down caret in the navigation menu, like the buttons. I was like, “No, those need at least a 3:1. You got to change that color.” Every design, I’m like looking at them before I even show them to the client because I don’t want clients to get attached. Then I have to be like, “Oh, sorry, nevermind. We can’t do that.”

>> STEVE: What’s been helpful too from a developer standpoint is, we’d get the designs they would have like the button state, or it’d be like, we have these button states, but the designer wouldn’t necessarily specify what the hover or the focus states were of those. The developer would kind of-

>> AMBER: Have to make it up.

>> STEVE: -make an assumption of what it should be and it didn’t always pass. Now we have a style guide in our designs. When we pass it off to the developer, it’s like, “This is what the hover state should look like.”

>> AMBER: Yes. I think that’s really helpful providing guidance for developers on hover states, focus states, sometimes in some instances that needs to be done, or active states, like if you have like a current page indicator– that’s the thing to remember about color contrast is it doesn’t just impact what it is if you haven’t used it yet, right? If you’re on an ad menu and you can have a certain style for your current page, it needs to look sufficiently different from the style for the other not current pages so people can see where they are, and that might include color contrast if you’re only using color to differentiate it.

>> STEVE: On the focus state too, the default browser blue that gets used for focus states, it’s fine on white, but sometimes– We’re working on a site currently, it has a purple background. Then you focus on it and it’s got this blue, and now blue and purple on it, so you need to modify the color of that outline.

>> AMBER: You mentioned style guides. I think I’ve seen more and more– largely bigger companies, but this is something we’ve been doing and maybe some other WordPress agencies are doing as well. I do think providing that brand style guides that address accessibility in color is really important whether you’re having your designer creative so they can follow it or having something you can hand off.

If you’re a branding agency, which we’re not, but if you’re doing the branding for clients, you should definitely be checking for color contrast when you create the brand. Then when you create their style guide, include guidance on how they can use colors in what way.

I know IBM and Slack have really good ones. A presentation about IBM’s and they were talking about AccessU last year. They were talking about how they basically have gradients of colors. Each of their colors has a gradient for each of the percents from 0 to 100 basically of that color. The way they’ve made it easy for their team is they basically say you can calculate a number and then you have to have one that’s– If you choose a 60%, then you got to choose a 20% of the other color, or something like that. We can link to what their brand style guide is.

Then I saw the University of Tennessee when I was looking for other good examples of this, they have another one that’s just on their website that shows literally how colors can be used with one another. I would say if you’re a branding agency, you really need to be thinking about creating these as part of your deliverable.

>> STEVE: They’re going for AAA, Tennessee.

>> AMBER: Well, they have a few AA colors that they allow.

>> STEVE: For hypherlinks.

>> AMBER: The thing is, it really does seem like to me, AAA, our color palette for equalized meets AAA. We worked really hard to come up with colors that would meet AAA. I would not say that all of our client websites meet AAA, but I do think the body text always does. Ideally, the link colors do, but I don’t know that the heading colors or other accent colors always do. I think if you can meet AAA, you should.

>> STEVE: Yes. I like this. It says, “Orange is the UT system’s brand color, but avoid using this color for text on a white background.”

>> CHRIS: Yes.

>> AMBER: That’s like what CSU has in theirs, right? Like they’re literally acknowledging that their brand colors were created probably, I don’t know, 20, 50, however many years ago. A long time ago, right? Before anyone knew about this. They’re trying to be like, “Yes, this is a brand color, but you shouldn’t use it.” I think it would be interesting to color modes in designs. We don’t currently give clients, as part of their base– If they wanted to add it to their project, of course we would, but not everyone does. This is your light mode. This is a dark mode where it responds if they set an operating system preference to a dark mode, or maybe even on the WordPress Accessibility Day, having a toggle where people could put it in light mode or dark mode, or a high contrast color mode. I’ve been wondering, is that something we should include or try to push more clients to build websites that way? What do you guys think?

>> STEVE: I could speak technically, Chris might be able to answer from a-

>> AMBER: Will they actually pay for it?

>> STEVE: -client’s budget perspective. From the personal side, I actually like it. I like when a website respects my– because I like dark mode everything. I dark mode all the things. I kind of like it. I’m sure there are times where it happens and I don’t even notice it. That’s from the perspective of a fully sighted person like light or dark. Now the high contrast, I don’t know what that would look like. Maybe I should set my settings to high contrast and go to some websites and see what that looks like.

>> AMBER: WordPress Accessibility Day, we did. Ryan Bracey is on our organizing team and his company Second Melody did the designs and did design out. This is what light mode would look like. This is dark mode. They didn’t in the designs do high contrast, but then we worked with Joe Dolson was a primary person on the organizing team who developed the website, and Nick Croft, the two of them. I think Nick did a lot of the color mode stuff. We worked to create the high contrast. If turn on high contrast in your OS, you will get a high-contrast version of that website.

Now, I don’t know how different it is because, to be honest, the colors on that website are really light colors with black. It might be only a few differences. In a lot of cases, it might be high contrast already.

>> STEVE: I’m not noticing a lot of difference. Like you said, maybe it’s–

>> AMBER: For sure, it also has the toggle where people can turn it off and on, but it will default to whatever your operating system preferences, which is always funny for me because I have my computer in light mode so I get it in light mode on my computer, but I have my phone set to dark mode. It looks different on my two devices when I go there.

>> STEVE: Yes, it’s pretty cool. There’s a technical investment to doing that. You got to think, anytime we create a custom module or component, that we’ve got to consider those three scenarios or four scenarios, right?

>> AMBER: Three, yes. Light, dark, high contrast. Well, I guess you wouldn’t need high contrast mode if all of it was high contrast to start, but I don’t know if everything would be. That’s probably unlikely. It’s not just the investment in the dev side and extra dev time to write the CSS for it. It’s also probably design because, as we mentioned, developers do better when they have design instructions.

>> CHRIS: Yes.

>> AMBER: No offense.

>> STEVE: No offense. None taken.

>> CHRIS: The other thing I’ll say is in the conversations I’m having, nobody’s really bringing it up. I’m also not selling it. I’m not like, “Hey, do you want your website to have light mode and dark mode.” It hasn’t really come up. I think the other thing that’s interesting about this is if you go and you look at the color contrast guideline subgroup for the W3C, this is probably five-plus years away, but there’s a little note in there that they’re considering adding a specification in WCAG 3, recommending developers embed a bright dark mode toggle switch into websites that cookies the user remembers the preference. Which is interesting, to say the least.

>> AMBER: Why would you do that? Why would you not just-

>> CHRIS: Just do it based on the–

>> AMBER: -respond to their operating system problems? That seems weird.

>> CHRIS: Well, I’m literally reading what’s in this GitHub.

>> AMBER: As we said, it probably won’t be published for 15 years and there may be many changes.

>> CHRIS: Well, by then, depending on who you talk to, generative UI is going to save us all, right?

>> STEVE: Right.

>> AMBER: Yes.

[laughter]

>> STEVE: 15 years, we’ll all be neuro-linked into–

>> AMBER: I have a question for you. I get why you probably aren’t trying to sell it because it’s an extra budget line item and it’s not like our websites are “cheap” and you haven’t seen people asking for it. What did occur to me is we have built some portals or web applications that have WordPress behind them. Some of them even have a view or a JavaScript front end. I don’t know if that even counts as almost like a headless type of implementation that’s using more API, right? Should those have dark mode because they’re more of an app?

>> CHRIS: Maybe.

>> STEVE: Maybe.

>> AMBER: Maybe that’s a line where you think about it, right? If you think about the apps you use on the phone or the things that you might expect to function more app-like, maybe there’s more of an expectation on users that they could go into their profile and set a preference for light mode or dark mode.

>> STEVE: Yes. I mean, it’s interesting too. If a user requires dark mode other than the way I want it just because I like everything dark. If they actually need it because of some visual impairment and then they turn it on and they barely see any difference on the web, it’s a little discouraging, right?

>> CHRIS: Yes.

>> AMBER: Yes. Well, I’ve been thinking about with our website that I think it would be cool to design and build that. Maybe we phase it. We launch the new website just in light mode and then we add the dark mode later or vice versa. We only do one mode first. Mostly because I think it’s kind of cool to showcase what you can do from an accessibility standpoint. That was part of why we did it on the WordPress Accessibility Day website. Because we were like, we wanted to show people this is a thing you can do because a lot of people don’t even know.

I think that if you are someone who you work with clients, or you’re trying to sell them on accessibility, or you’re someone who wants to show what accessibility looks like, then having that on your own website is probably a good thing to do.

>> STEVE: Yes.

>> AMBER: Do you think people would buy it, Chris?

>> CHRIS: I think it probably depends on the customer and their audience to an extent.

>> AMBER: Yes? What do you mean?

>> CHRIS: Well, I think that there are certain customers that are more interested in maximizing the utility of the experience their website users get versus others. There are some people who care the most about having the coolest and most advanced version of a website that is possible that can be built versus those who are more interested in balancing budget with utility, if that makes sense. I think there are certain types of people that want the bragging rights, they want the Ferrari equivalent of a website, and then there are those that don’t.

>> STEVE: Yes, or they’re limited by budget, time, budget.

>> AMBER: Yes.

>> CHRIS: This is definitely something where I can say adding a feature like this 100%, there’s no question. It would be potentially a significant budget increase depending on the complexity of the website because you’re talking about having to create sets of rules in the design system and in the build itself to account for this user preference everywhere. That’s what all of accessibility is to an extent. This feels like it impacts more of the front end than what most of accessibility is, which is just making sure something’s coded correctly and meets some standards.

>> AMBER: Yes, sometimes it’s invisible, the accessibility. Well, invisible to the people who are not using screen readers. I think maybe as a final question before we wrap up here, we’re going to assume most clients only have the budget for one mode. I think it would be interesting to talk about should we all change what we’re doing and just be designing for dark mode? Right now, I think most of us, most agencies, most designers design a light-mode version of a website. It might have some reverse sections, but it is a light website, right? Is that wrong? Would it be better for accessibility if you’re only doing one to design darker websites?

>> STEVE: Yes. What are the statistics on users that would prefer light versus dark or that would benefit from– Right?

>> AMBER: Yes. I did a little bit of digging on this before the show, of course, because I was like, “I think this is a question we should talk about.” I wanted to figure out, I’m very scientifically focused. I wanted to know, are there actual studies on this? Not just some person saying their opinion on a blog. We’ll put all these links in the show notes, but I found a few.

From University of Illinois, there was a study that was related to willingness to buy products and food products specifically. They looked at menu preferences. This was interesting because it said that the willingness to buy products when the text was on a light background, people were more willing to buy it. They also thought the food product was healthier on a light background. If you have a packaged good and you’re trying to make it look organic or green or super healthy for you, people will perceive it to be healthier or better for them if it’s on a light background versus a dark one.

They did find that women preferred light menus versus men preferred dark menus. I don’t know if that’s an overall stat that if you have a male audience, you might do better with a dark-mode website versus a light-mode website.

There was also some stuff from Harvard about dark versus light maps. You know how Google Maps has a dark mode and that kind of stuff and how dark mode is definitely always better if it’s at nighttime? There could also be an interesting thing if you’re building an app or you have a certain kind of website where you expect more traffic at night for one reason or another that maybe that might make sense.

I did find one on PubMed, which is a United States government website that does medical studies and research and correlates them all so you can go find them, where it said eye tracking and subjective data said when they tracked eye tracking, dark mode websites were a higher cognitive load for older adults, especially in a bright environment. They were harder for older adults to read.

>> STEVE: An interesting thing with that is when the phone switched over to like OLED screens, where it’s individual pixels of light, I noticed like on dark mode on my phone, if the brightness was turned up too much, I felt like the text was just like screaming at me.

>> AMBER: Yes, which is a whole thing we don’t have time to get into, but there is a thing such as too much contrast. Some people can have a hard time with straight black on straight white. Usually, we’ll do dark gray for text instead. Maybe that’s the same thing that you were experiencing, it was too much contrast.

Nielsen Norman Group also has a whole article about dark mode versus light mode. This one’s not quite as old. It’s from 2020. They said that visual performance tends to be better in light mode, but some people with cataracts or related disorders perform better with dark mode. Long-term reading in light mode may be associated with myopia. If you’re an ebook reader, you probably want to make sure your ebook is in dark mode. I think based on all of those, that light mode is better.

>> STEVE: Yes. Very cool.

>> AMBER: All right. That’s what I’ve got on color contrast. I don’t know if any of you want to add anything towards the end, any words of wisdom for convincing clients or internal stakeholders to have better color contrast.

>> CHRIS: Oh, there’s always the fallback of if your customer continuously insists on having inaccessible color combinations for their website, you can always make them sign something that absolves you of any liability. Maybe that conveys to them, the seriousness of the request if nothing else does.

>> AMBER: I think we’ve suggested that to clients before and they’ve been like, “Wait, nevermind.”

>> CHRIS: Yes.

[laughter]

>> CHRIS: We’re not signing off on this.

>> AMBER: If you’ve got in your contract that you’re going to make certain things accessible, like that, that was the thing with the one where I was saying the white text on the blue box, I’m pretty sure we asked them to sign because we literally put in our statement of work that the whole home page would be accessible. You’re going to have to sign saying that you’re releasing us from at least this component of the homepage because, right?

>> CHRIS: Totally.

>> AMBER: Color contrast is an interesting conversation with stakeholders, but it is definitely a battle worth fighting.

>> CHRIS: Yes, totally. I agree.

>> STEVE: This is a very good beer, by the way, Chris, good pick.

>> CHRIS: Thank you. Most of the way through it.

>> AMBER: Yes. Thumbs up on [inaudible]. Allagash Kurkuma. How do you pronounce that?

>> CHRIS: Kurkuma is what I would say.

>> AMBER: All right. Well, good job.

>> STEVE: All right.

>> AMBER: Thanks, everybody. Be back soon.

>> STEVE: See you.

>> CHRIS: Bye.

[background music]

>> CHRIS: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple podcasts, Google podcasts, Spotify, and more, and if building accessibility awareness is important to you, please consider rating Accessibility Craft five stars on Apple podcasts.

Accessibility Craft is produced by Equalize Digital and hosted by Amber Hines, Chris Hines, and Steve Jones. Steve Jones composed our theme music. Learn how we help make thousands of WordPress websites more accessible at equalizedigital.com.

[] [END OF AUDIO]