As part of our commitment to giving back and sharing knowledge, we have partnered with the WordPress Foundation’s community team to run an official WordPress Meetup centered around building more accessible websites with WordPress. This post has a recap of our Meetup that took place on Monday, January 17th, 2022, and a video recording of the presentation.
About the Topic
In this presentation, Carie Fisher, author, speaker, and developer with over 15 years of tech experience, explained the choices you can/should consider in an accessible visual presentation using text, such as font, color, contrast, size, column width, spacing, kerning, and more.
Thanks to Our Sponsors
WP Engine, a WordPress technology company, sponsored the live captions for this event. They provide the most relied upon and trusted brands and developer-centric WordPress products for companies and agencies of all sizes, including managed WordPress hosting, enterprise WordPress, headless WordPress, Flywheel, Local and Genesis. WP Engine’s tech innovation and award-winning WordPress experts help to power more than 1.5 million sites across 150 countries.
Empire Caption Solutions strives to create inclusive experiences and engage individuals with different abilities and backgrounds by providing high-quality accessibility services for recorded media, such as closed captions, transcriptions, Audio Description, and ASL interpretation. By utilizing both the latest technology and human expertise, ECS is able to help its clients meet WCAG 2.1 success criteria and ADA compliance while offering options that fit almost any budget.
About the Meetup
The WordPress Accessibility Meetup is a global group of WordPress developers, designers, and users interested in building more accessible websites. The meetup meets twice per month for presentations on a variety of topics related to making WordPress websites that can be used by people of all abilities. Meetups are held on the 1st Thursday of the month at 10 AM Central/8 AM Pacific and on the 3rd Monday of the month at 7 PM Central/5 PM Pacific.
Learn more about WordPress Accessibility Meetup
Watch the Recording
If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter or join our Facebook group for WordPress Accessibility.
Links Mentioned in This Video
The following resources were discussed or shared in the chat at this Meetup:
- WordPress Accessibility Facebook Group
- Color Contrast Checker by TPGI
- Color Contrast Checker by Adobe
- Leonardo Color Tester
- Contrast Grid Checker
- Color Contrast Palette Checker by A11y Rocks
- Understanding Contrast by W3
- The Science of Color Contrast
- Adobe Fonts
- Google Fonts on Adobe
- The Good Line Height
- Golden Ratio Typography Calculator
- A Cautionary Tale of Inaccessibility: Target Corporation
- Target Accessibility Suit
- Carie Fisher’s Website
- Carie Fisher on Twitter
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Read the Transcript
[00:00:00] AMBER HINDS: I’m going to go ahead and get started, and then I will have a few announcements. Let’s see, I’m going to remove the spotlight from you just for a little bit here, Carrie, and then I’ll pull you back up and introduce you in just a minute. If you’ve been here before, this is a little bit familiar to you. We do a little bit, a few announcements first. I always like to point out we have a Facebook group if you want to connect with people in between meetups, share ideas, ask questions, get help.
[00:00:36] You can just find that if you search WordPress Accessibility on Facebook or the website address is facebook.com/groups/wordpress.accessibility. You can find upcoming events and past recordings in one place now. As of about two weeks ago, we threw up a page on our website. It’s just equalizedigital.com/meetup, and it will redirect to the full URL and you can find all of the past recordings there, and see some upcoming events and who some of our sponsors are.
[00:01:08] On that note, we are seeking additional sponsors. We have open sponsorship slots for 2022. Unfortunately, as I noted, and I know that we have some attendees here today that I recognize that I know benefit from the ASL interpretation, our ASL sponsor wasn’t able to continue so that is a slot that we have open. We are also looking for people to help cover the cost of live captions during our daytime meetups.
[00:01:39] If that’s something that your company might be interested in, please reach out to me, or you can get a lot of information off that website that I mentioned, equalizedigital.com/meetup. You can see what all the sponsor benefits are, what all the costs are. This is totally nonprofit. We’re not making any money off it. We literally are doing the exact dollar amount that our vendors charge us.
[00:02:02] It’s just a way for us to try and help spread out the cost. Then, if you have any suggestions, or you need any assistance, or have ideas for the meetup, feel free to reach out to us. You can just email meetup@equalizedigital.com, and it will grab a couple of us organizers and you can let us know what you think or ask your question. Who am I? I am Amber Hinds. I am the lead organizer for this meetup. I work at a company called Equalize Digital.
[00:02:38] We are a WordPress VIP partner. We’re a certified B corporation. We have a plugin called Accessibility Checker, which is an auditing tool to help businesses or individuals, developers, designers, test their websites for accessibility. It’s a great way to augment your manual testing and see reports right in the admin dashboard. We’re pretty much just big accessibility advocates and accessibility fans.
[00:03:09] That’s why we got into this because we wanted to be able to learn more about accessibility. I feel like every time we have a speaker, I learn more and I benefit. That’s who we are, organizing to meet up. Today we have two sponsors. The first one is WP Engine. They’re sponsoring the live captions for this evening. WP Engine, they also own Flywheel and they have an app Local that can be used for local WordPress development. Of course, they own Genesis and StudioPress.
[00:03:43] Please check them out. You can find out more about them at wpengine.com or if you want to tweet a thank you to them for sponsoring our live captions they’re on Twitter @wpengine. The other big sponsor that we super appreciate is Empire Caption Solutions. Empire Caption Solutions is saving us a ton of time because they have donated their services to correct the transcript after the meetups so that we can get up a recording that has accurate, enter corrected captions, and a full transcript for people to read.
[00:04:23] We used to be doing this in-house and it would take us almost an entire day, like eight hours to do the full video. We hugely appreciate them. You can find more out about them at empirecaptions.com and on Twitter, they’re @EmpireCaption. Upcoming events, we will be doing another live audit of a plugin. It’s going to be GiveWP, which is a really popular donation plugin. Their team has already been working on some accessibility, but they’re trying to improve it.
[00:04:59] We did think that we were going to have Glenn Walker as our speaker, but I just heard from him that he may not be available. I’m going to be reaching out to a couple of individuals I know that are either really experienced testers or real-world native users of screen readers to see if one of them might volunteer so that we can stay with that one. I’ll be announcing the topic for the Monday meeting in January next time.
[00:05:28] I will fully admit that with today being MLK day, I appreciate everyone tuning in on a holiday. With today being MLK day, I was a little behind and did not get the information on that meetup up. That will come up in the next couple of days. Now, of course, the main event what everyone is here for, I’m going to add a spotlight to CarrieFisher. She’s a senior accessibility instructor and developer at Deque, and she’s an author, a speaker.
[00:06:05] I follow her on Twitter and she shares a ton of great information about, UX, digital accessibility, diversity in tech. I think you’re also working on your Ph.D. right, Carrie?
[00:06:17] CARRIE: Yes, I’m busy. That’s for sure [laughs].
[00:06:21] AMBER: I am going to stop sharing my screen and I will let Carrie take over. I will be monitoring the chat. If you have any questions, feel free to pop them into the chat and I will ask them to Carrie. I’m sure at the end we’ll also have a time if you feel more comfortable and you want to unmute, you can do that as well.
[00:06:46] CARRIE: Hi, thanks so much, Amber. Thank you everyone for allowing me to come today to talk about some of the things. I like to talk about digital accessibility in general, but I’ve gotten into typography the past year or two so I really wanted to boil it down. All the talks that I do and all the writing that I do, I think essentially at one point was for me [laughs] like notes so I don’t forget or things that I wanted to learn about.
[00:07:15] I do deep dives and then I would try to parse it in a way that maybe is beneficial disarmament. Maybe there’s a few takeaways. That being said, this is a very informal conversation we can have. If you want to pause, ask me a question, feel free. I’m not looking at the chat, it got too many screens going on here, but if you just raise your hand or Amber, if you want to call on people that’s fine too, otherwise, I’ll just do my thing and have plenty of time to talk about it at the end.
[00:07:50] This is one talk that, again, Accessible Topography Essentials, I’m going to try to describe things on the screen, but this is going to be pretty visual-heavy throughout. Just keeping that in mind. I’ll try to explain it. We already saw a slide about me. There’s me. I am certified for the IAAP. The CPWA is that C pack plus the loss together, and then now there’s a new one that I need to go out and get, but I haven’t done that yet [laughs].
[00:08:23] I do work as a Senior Accessibility Consultant at Deque. I also work as a student and work at Iowa State University. I saw someone was from Des Moines in the chat, hi, to my fellow Iowan. Even though I’m in Wisconsin, I feel like I complain a little bit. Anyway, I’m here to talk to you today about a big area where designers and front-end developers, developers of any sort, content creators, editors we can really sink our teeth into. We have a really big impact whether our products are accessible or not. That is typography.
[00:09:04] I’m not a designer, I’ll say that from the very beginning, but I am someone who was a front end developer for 15 years plus worked a lot with Terkel and WordPress, and other frameworks and learning about how best to not only for me as a developer, but how do I integrate the designs from the designers? How do I think about the people editing and content creation? It’s a whole team that puts us together.
[00:09:31] It’s not just one group. Just because you’re a designer doesn’t mean that you can’t maybe learn something and apply it in the future. Typography for anyone that’s not– thinks mainly just font families, that’s how I thought about at the beginning, but it can include those type pieces. It can include the character styling, color contrast is in there, layout, spacing, kerning, just to name a few.
[00:09:58] There’s a lot of different elements and it can feel overwhelming because there are so many elements, but I’m going to give you some basic takeaways, and I’m also going to do some demos with a design because this is a shorter meeting and we’ve already had a little bit of conversation. I don’t know how much of my demo I’ll be able to finish, but I can show you at least the beginning and the end part.
[00:10:21] All right the demo that I found is actually one that was created by somebody it is viable and live in the world. What I did is I took it. I thought that it needed some tweaks when it came to accessibility. Then almost see that before and after. Just double-checking the chat there. The first thing color and contrast. If you have been around for any length of time and know anything about accessibility you know that color and contrast is really important.
[00:11:01] Those words icons, graphical information anything that is hard to discern design can be quickly inaccessible. What happens when you perceive color and contrast in a different way from others? There are people with dyslexia, not dyslexia. People with low vision, with- obviously people who are blind they don’t necessarily color and contrast, but a lot of people who are technically legally blind are in that low vision category.
[00:11:32] We have a color deficiency. 253 million people with low vision, 300 million people who have color blindness or just cannot see full color. There’s a lot of people that really are impacted by this. All right I’ll do the color contrast takeaways, and then we’ll do the demo and we’ll go back and forth. Some of the things that I’m going to be looking at in this design are the following.
[00:12:06] The first one is making sure that we have that small text that has that 14 point or smaller, has that color contrast ratio of about 4.5:1. That large text of course we have that 14 point bold or 18 point that has the contrast ratio of 3:1. These I’ve been talked about changing in WCAG 30 and beyond, maybe I’ll eat its way into Tutu, but I doubt it, but for now, this is all that we have to concern ourselves with when it comes to color and contrast.
[00:12:38] When it comes to text against background. That ratio is a formula. It’s talking about the text, it’s talking about what’s on the background. Sometimes that is like a hex on hex which is pretty easy to solve, but you have also issues when you have texts on top of a ingredient or text on top of an image, and so there’s different tools that you could utilize for that. The third part of that are the icons and essential images has that contrast ratio of 3:1.
[00:13:05] Essential meaning that if that icon disappeared would it change the meaning of the page? For instance, my home website has icons as menu items. They’re like buttons. They have the right alternative text they have all that, but they are staying alone. There’s no text next to them, and so if they disappear they’re essential. It changes the whole meaning of the page.
[00:13:29] Like you can’t even find the buttons. They are very essential. They definitely fall under that 3:1. We have those solid color with the backgrounds help with readability. For the most part I think most people now it’s not 1995 anymore, and we don’t have text on top of a exciting background with all kinds of textures and things in. We’re pretty good about that.
[00:13:52] One thing to think about though too is, and something I’ve learned over the past few years talking with people or users that color issues, and again it could be people not even just on the color blindness spectrum, but people who get migraines or people who have certain visual disabilities like glaucoma. There’s certain color combinations and that white that really stark white is difficult even for them to see. A lot of them will use that. Prefer the color contrast. The dark mode versus the light mode.
[00:14:24] If they have a dark mode option some of them will go there, but even then the white text on top of that black background. There’s a lot of user variables that we are contending with beyond just the ones that we need to do for WCAG and making sure that things are accessible. Of course, we don’t want to rely on color alone to convey information. If I said something like pressing don’t press the, or press the red button if you don’t want to do this press the green button if you do want to do this.
[00:14:54] I am relying on color alone. If I can’t see or differentiate between the red and the green which again is a big problem with people of color blindness, then that might be difficult for me to do to convey what my yes or no. Ideally, we’d have words with it. We’d have other things, but again the idea is that we’re not using color alone to convey that information. Like I already mentioned those certain combinations red, greens, shades of grey. Some of those are really difficult for people to see.
[00:15:26] We definitely want to make sure that we’re thinking about inclusion when it comes to color. I’m going to grab the– there we go. This is a illustrator. This is a COVID 19 work from home flyer. This is one that I found that was on Adobe Spark. It’s one of those template versioning things. You can go there and find all kinds of different templates for different things depending on what you want to do.
[00:15:52] This is one that I found, and I took a look at it. I will say I made it probably a little bit worse than what I saw at the very beginning, but what we see here is, and if we’re thinking about just color and contrast at this point in this topography is that we’ve got some potential issues with some of these colors. We have a icon which is non-essential it’s decorative if I would say in this case, but we have a lady and she’s got some different colors of her design, but what I’m really focusing on this one are the text.
[00:16:25] I’m looking at this light blue against that teal.
[00:16:28] I’m looking at this text that is grey on top of the tannish color. Going on down the way. You can see that one is pretty bad. There’s a lot of different color contrast tools that you can use. The one that I’m going to use for this really quick demo is the color and contrast analyzer. If you’re not familiar with it already that’s a TPGI tool that I love. I use it all the time in assessments.
[00:16:55] It sounds funny to say I love the tool, but I really do love this tool, because it’s gotten me information that I would’ve never been able to get otherwise at least in that accurate way. There’s different tools that I could probably eye drop of type tools, but I like this one because I can also grab things that are not on the image or not. Like right now I’m grabbing different colors around my screen.
[00:17:20] It’s pretty phenomenal when it comes to text on top ingredients or text on top of images for sure, but in this case, let’s say we have a design file. Maybe we don’t have the AI. Maybe we don’t have InDesign file. Maybe we don’t have whatever file type that it is that you’re looking at, and we can’t get these X values. I can take a tool like this and approximate what it is.
[00:17:45] I get this question a lot too on these tools where it’s pixelated and you can see different variables. I pick usually whatever straight line is that I can find or the straightest line I can find that typically is the color that it is their play around with that a little bit. Let me close these up a little. We have this foreground we probably already knew this one was going to fail. We had that light pink on top of the salmon color. Right here we have that contrast ratio 1.6:1.
[00:18:16] If we look here if we forget what we’re looking for we’re looking for that 4.5:1. If we decide that that is smaller text, or if we decide that it’s a larger text we could do that 3:1. It gives you a little bit of regulations there. Tells you a little bit about that. What I also like about this one as well is that we can sync those color values and I can play around. This one’s going to be pretty extreme. I’m going to have to go a lot darker.
[00:18:43] Let’s see we’re going to go 4.5:1. Completely changes the way that this page looks. From a design point of view, this might not be the way that I want to go. There’s a lot of different, beyond just being accessible and inclusive this idea that you’re going to have a lot of variability, a lot of choices I think stepping back one step, and one thought process is that WCAG. If you’re not familiar with the web content accessibility guidelines they’re made for the digital space, but the foundation is in the web.
[00:19:24] The word web is right in it, but it can be applied to different things. It can be applied to native apps. We have design that’s one example as well. That’s why 2.2 and 3.0 is going to come about and talk about more emerging technologies and more design and more cognitive, and a lot of the things and more mobile of course. A lot of the things that we didn’t have to contend with when it first was developed.
[00:19:55] Design is one of those things like there is not necessarily a straight like this is how you do it, this is the WCAG, but there are definitely ones that touch color contrast as a huge example we should all be aware of if we’re not already. There are some checklists that I have found that have been really helpful, but again there’s not one that’s specific to design, so some of this is going to be a little bit interpretation. Side not there. As I go through, I’m looking at all kinds of different things.
[00:20:25] One thing I want to highlight real quick here, and I’m trying to be cognizant of time too, but we talk about, when I do an assessment too, if I’m looking at this from a design perspective and I’m saying, okay, what am I measuring? When I see this, this is a shadow, or you can have a drop angle or whatever it is that you want to call it. What I have to look at is the lightest part, because it’s not an outline.
[00:20:51] If I outlined this, if it had that full salmon, dark salmon color around the whole letter, the whole number here, I could pinpoint that one because it was well, it’s still not meeting the requirements, but I could have picked that one if that one was strong enough, and here I’ll just show real quick, the fixed one. In this case, while you’ll see it a little bit, that we’re going to change the background, but that’s what I am doing here because I’m going to pass, no matter what color I pick.
[00:21:24] This is for the large text only. On this one, I’m going to pass, so go down there. The other one I’m scrolled in a little bit further, but this is the dark color that I changed for the text that was on the other one. I’ll space out a little bit, blow it out a little bit more here. The first part of this accessible design is I’m just really thinking about color. There’s a billion ways that you want to do it.
[00:21:55] I just like break it down into these different categories of what do I want to focus on first. Color is obviously an easy one, relatively easy because there’s a billion tools that are out there. We’ve got very clear ratios. We’ve got to smack that in the middle of what WCAG requirements. There’s not a lot of extension or gray area in this particular point. Of course, like I said, billions of tools.
[00:22:23] These are a couple of the ones that I really like. Adobe color has this really great accessibility tools beyond what you might already know. The hardest one, let’s see down here under tools I can go to I’m at color.adobe.com. I am on the accessibility tools tab, and this is just a regular contrast checker, which isn’t too exciting these days, but I can see this colorblind safe.
[00:22:49] Here’s one where I can see my palette with the different disability, the different color disabilities that we have here. There’s a lot more than that, and there’s different strong and weak and versions of this as well. This gives you a rough idea of how this palette might work. I can tell you what kind of issues we have. I can take it and drag my mouse. A friend of mine used this on with their keyboard and said it was pretty accessible.
[00:23:16] I haven’t tested that myself. Definitely, check it out if you want to. We can see how that deuteranopia approach, anopia, and tritanopia. I probably said that wrong, but you’ll see how these totally changed in this particular, this palette, for instance. I went back to here, I can do this too. All the tools, all of these probably have their own kinds of things built in. I want to Macs OS.
[00:23:46] I can do this myself as well just from the OS, but you can see right here, that’s the tritanopia and then the deuteranopia, so different tools, different whatever you’re using for your designs, you’re going to have different options plus on your operating system, you’ll probably have a decent amount of options as well. That gives you just like a really high level of what your design is going to look like. If you’re thinking pallets, this is going to be right up your alley as well.
[00:24:14] Tens of tools, just a couple more. I wanted to point out if you’re working with Figma, so many people are. They do you have accessible color palettes already built-in based on off the Leonardo, which is just fascinating. Gets into lots of charts and data and really the specs of why things are rated for those kind of particular ratios, and it’s just interesting that you’re into that sort to think.
[00:24:42] Also, if you’re thinking about contrast grids, if you’re thinking about pallets, a lot of pallet generators out there as well. I like this one just because it’s nice. It’s got this grid pattern to it. You can modify what you want to do over here. I could just type into it let’s say, and this might be doesn’t even have to have the right word. If I have branding colors and it’s called midnight and it’s just black, I can go through here and I can see, which ones are going to be passing for AAA, which ones are going to be passing for AA at 18 size, so the larger size all the way down to does not pass. That’s what the D and P is. It’s pretty fun.
[00:25:25] Alley rocks is another one that I use a lot too. This is the combination of pallet. Then as you go down, it’s going to tell you what is accessible, it’s going to go from most to least. There’s a lot of different ways to look at things. Definitely, depending on what part of the design process you’re in or if you’ve got specific codes that you have to work with or branding colors that you have to work with, these give you a really high-level view of what you know that you can work with. That’s where that comes into play.
[00:26:02] I said a lot about color and contrast because it is really important and there is no real gray area on that, but I just wanted to I’ll keep moving on about that because you’ve probably been there, done that.
[00:26:13] AMBER: We do have a couple of questions.
[00:26:15] CARRIE: Oh sure.
[00:26:16] AMBER: Two people were wondering how close can you get to full white, the whole six Fs without causing a problem for people with glaucoma?
[00:26:25] CARRIE: Yes, I think, well, see, the problem is, is that a lot of that’s going to come down to usability and user preference. There’s a lot of, or like I might have glaucoma and be fine with white or I might not have glaucoma and hate white. It’s this combination of how far can you push it? You’re never going to know in that sense. There’s not it says, people just say, “I have glaucoma and don’t do this shade of white.”
[00:26:58] It’s more about that variability amongst individuals, but also you don’t have to go stark black, you don’t have to go stark white, you can do something like a darker gray, a little bit of an ivory. You can look right here at some of the, again, it can model this whole thing. This is a straight white color and how sharp it is versus maybe let’s go like a little bit lighter. It’s going a little bit.
[00:27:29] Just by even well, that’s probably like too far, that’ pinky beige. There we go. We’re a little bit ivory. You can see that the curve starts to be less severe when you’ve got these more softer palettes. Again, I can’t tell you what’s going to be perfect for glaucoma, but I can tell you that offering your users multiple choices, not going to the extremes on everything, obviously meeting those color contrast ratios are important, but you’d be a little bit softer.
[00:27:59] AMBER: Can you explain, so you are moving around to pick a different color.
[00:28:05] CARRIE: Oh sorry.
[00:28:06] AMBER: What are the charts for people that are less familiar? What are the charts that are up on the screen and what are you getting out of these?
[00:28:14] CARRIE: Yes. For me, there’s a lot of different ways to look at this. These are just looking. If you think about color, contrast ratios as being a formula, it’s a pretty complex formula has luminosity. I won’t even try to explain it because I don’t really understand it fully, but it’s a formula and that’s what they’re all based off of the color contrast ratios. What this is showing is red, green lightness, blue, yellow lightness, and red, blue, yellow.
[00:28:41] We have these different combinations of colors and lightness. You might as an individual, you might know what sets you off. You might be that red, green combination that and the lightness that you don’t like. You could look or build for specifically with that in mind. You could think about that. Honestly, I think most people who do have problems with that sort to the extreme, I’m going to bring over my preferences here.
[00:29:14] A lot of them will go into accessibility either on their Mac or their PC or maybe their Linux even, and there’s a lot of different options for display. If I know that I’m someone who doesn’t like stark white, it either aggravates my disability or just it’s too bright for me and I can’t handle it, I can come in here and add some color filter as well. I know some people do that.
[00:29:38] Do a color tint, won’t do pink, but that’d be pretty extreme, but let’s do a grayish. That might be too dark now. Let’s go there. Somehow, I picked bright green, hold on too much going on here. Hold on. There we go. Sorry about that I don’t know why I took that one. All right. Let’s choose that color. I did not choose that. All right. There we go. I’m sharing my screen. It’s like going too slow here. Let’s go there. We do it that way. It’s not saving it. I think I’m sharing too much. It’s not going fast enough here. All right. Let’s see. Maybe I can put that one here.
[00:30:31] AMBER: That’s okay.
[00:30:32] CARRIE: Yes. I keep changing the color. That’s so weird. All right. Well, you can do the filters, right? That’s extreme. What I’m going to filter on right now is red. I’m trying to show you maybe a softer, but it’s not picking that up for you. Maybe something like that. Here’s might be an example where I would do something on the operating system level and not think about it.
[00:30:55] I think about- I’ll start later on with the colors now it’s very delayed in here turn that off. I think about all of accessibility really being about making the best choices as designers and developers and whatever tool we have, but then also allowing users to make certain choices. There’s going to be certain choices that I could make if you gave me a light mode and a dark mode or there’ll be certain choices that I can make on my own on the operating system or I can have my own style sheets and overwrite things.
[00:31:26] When it comes to design though you obviously have a lot less things that you can play with unless you do something like this where you do a complete color tint or white versus Windows high contrast mode where they’re looking mostly at just the text in the background. We’re just thinking design-wise then we don’t have as many options there [inaudible] the whole.
[00:31:53] AMBER: Mark is wondering on that note. Does you play a role in–
[00:32:00] CARRIE: Yes. That’s one thing here. I think that the– Color contrast formula. There we go. There is a lot of different articles about this, but I don’t know if this is the one that I wanted. They have this idea that you’re looking for different things. You have that luminance which is– Ops. Let’s see. It’s going so slow here. We have this luminance. We have the color contrast. We have the dynamic range which is some of the things that we were talking about with the comparison.
[00:32:35] Optical glare, color contrast ratio, human eye dynamic range. There’s all kinds of different things that you could really look into. I was looking for the actual formula. There we go. Relative luminance versus– The L2 is the relative luminance of the darker of the colors and the lighter of the colors. Yes. It gets to be super complex when it comes to ratios. Okay. I can’t even explain that and I think that does a little bit more than that then this is [inaudible] same [inaudible] and then chat if anyone wants to read that one.
[00:33:10] AMBER: I think-
[00:33:11] CARRIE: Thank you.
[00:33:12] AMBER: -you did it.
[00:33:14] CARRIE: Yes. This is maybe not the best example. I just did that quick Google, but I’ve read a lot of different things in the WCAG specs about how it’s calculated and there’s all these really interesting conversations about what’s going to happen in the future because we have this idea that what we have now might not even be enough, right? We’re already pushing that. A lot of websites still don’t have that. The basic color contrast. I don’t even know how we’re going to get it better, but yes we’ll try.
[00:33:43] AMBER: I think we have one more question before-
[00:33:47] CARRIE: Sure.
[00:33:47] AMBER: -we’ll let you go on. Dave asked if users can fix the problem of full white in their settings if they have glaucoma, would you say that that’s something that a website doesn’t actually need to worry about because they could have just done it at the OS level?
[00:34:02] CARRIE: Yes. That’s always the balance I think with anything with accessibility is that you’re thinking about the scenarios and you’re taking WCAG and you’re taking all the different requirements that you might have internally and what your clients already telling you. You had to make your choices based on all that information, but at the end of the day there’s over seven billion people and they’re all individuals and the way I feel about white backgrounds today might be different than the way I feel about it in the middle of the day or that midnight, right? That’s the idea that within every individual that you have the variability as well as every individual has their own preferences, right?
[00:34:45] You’re never going to please everyone all of the time. I think the whole feeling to me about WCAG, the spirit of it, and the spirit of being accessible, and thinking about inclusivity within your designs or anything else should do is that you are trying to make the best judgment call based on the information that you have. It may not be the perfect combination for every single individual that you encounter, but giving them options is first and foremost–
[00:35:14] First following rules they can give them options, but then also allowing them a way to override that, right, and being able to choose their own adventure. It’s all the things, right? I think that’s why accessibility is both interesting and can be frustrating for some people. Yes. That’s a long-winded way of saying try your best to accommodate the people that you know might already have issues with that and then allow them to either make a choice like maybe dark mode or you give them a choice of the operating system options. Yes. I don’t know if that answered your question, but it’s my quick and dirty philosophy.
[00:35:57] AMBER: I think it’s a good one. Trying to do the best you can and then hopefully they’ll have tools as well.
[00:36:04] CARRIE: Yes. Listening the feedback is always crucial too. That is part of it too. Having a dialogue with your users is critical also. There’s a lot to talk about with color and contrast but I definitely want to make sure we highlight a few of the different typefaces and styling and some of the other things because I think that once we get that color and contrast in place and we didn’t talk– Like I said we didn’t have a whole trainings on just color, but this idea, that topography it goes beyond that color and contrast.
[00:36:36] Color and contrast in someway is fairly easy to meet if you’re just thinking WCAG, right? It’s a ratio you pop in, it takes values, use a little dropper and figure out the ingredients or the image and then you move on, whereas typefaces and styling can get a little bit more complex and not necessarily always have something concrete, right? One of the things that we talk about a lot are fonts.
[00:37:04] People are saying font [inaudible] I wrote here using common font families like Arial, Open Sans whenever possible. There’s lots of really interesting studies talking about the accessibility of certain font faces and Dyslexia is one of the– There’s a Dyslexic font that’s specific for dyslexic people and then you have all these ones that are specific. There’s one for autism that’s specific for these people.
[00:37:34] We’ve always heard that Papyrus and Comic Sans are really good. It’s the concept of– Obviously, there’s an individual part of it, but the research has shown that that’s not necessarily true, that it’s not necessarily like the font for my specific disability isn’t going to be the one that is the best for me.
[00:37:55] In fact, what the research has seen is that common fonts are better for the most part because when– I’ve already looked at Arial. I’ve already seen Open Sans a billion times. Cognitively I’ve already figured out how to read it essentially or how to map it in my brain. It’s not a conscious thing. It’s like what you go because you encounter it so often like you learn how to work with it or around it.
[00:38:22] This concept of just using common fonts doesn’t have to be Arial or Open Sans, but those are two examples of common fonts. It’s really fascinating research and there’s definitely not enough that’s out there, but so far that’s what we’re hearing. Even that whole debate of Serif versus San Serif it doesn’t matter if you are thinking about in terms of common fonts, right?
[00:38:47] We’ll talk a little bit more about what that means. Avoiding the specialty typefaces that target certain disabilities. Again, it’s not that you couldn’t use it. I’ve actually used it on the site before whether as a toggle. I’ve given my user choice. I haven’t given it to everyone. Maybe the down or the standard one would be Arial and if they wanted to toggle for that particular font they could.
[00:39:12] Giving them choices, but I think number three is the most important though. If you’re not even thinking about one, you’re not even thinking about two go just straight to three. Three is making sure that you pick a typeface that has unique characteristics. What we mean by that is when I put a P in front of a mirror it doesn’t look like a Q. If I put B in front of a mirror it doesn’t look like– The mirror opposite look like the D.
[00:39:39] You need to have these unique identifiers that make these letters stand out. There’s a whole gamut besides B, Ds, and the P, Qs that we’ll definitely talk about. Having met minimum copy needs, 14 point larger if we can. Making sure we limit the number of typeface variations increases readability. It’s the same concept of not overwhelming people with too much information. Don’t overwhelm people with too many fonts and this idea that you’re also adding things like avoiding things like only color, all caps, italic, and such to emphasize a word. Excuse me.
[00:40:33] I was talking a lot about that but there’s a lot of different ones that I want to jump on. I’ll show you this example again. We have different options here for fonts. When we look at this, we know that it is not the font that we necessarily want. Let’s see what we got. In this particular case, this is the name of the font, Titular Book Italic. There’s a lot of different things that we can talk about with this font in particular.
[00:41:07] The first thing, of course, it’s italicized. It’s a little bit more difficult to read. Color contrast aside, this font, what I have here– let’s see if we go. Let’s see. Right now, I’m on Adobe Font. You don’t have to go to Adobe you can go to different ones, but it’s the idea that I can see all the font game ways. I just looked up the one that I’m using in the flier. The default sample text is the quick brown dog jumps over the lazy dog.
[00:41:43] It shows all the different letter but I want to see are the characteristics that I mentioned before. It’s called the chirality. If I put a b in front of a mirror, let’s put a d, are they exactly the same? It may be a little hard to see. In this particular case, we have some unique variability. We have this little seraph. That’s a little bit different than that b. The d is unique from the b. That’s not the only one we want to look at. We want to look at that q and that p. We want to look at the n and the u.
[00:42:21] Sometimes people do m and w’s. We’re going to look at the number one, the lowercase l, and the uppercase I. We’re also going to look at zero versus capital O. Slide in a little bit closer here. Again, the idea of chirality, if I look at that q and I look at that p pairing, they are exactly the same. I know that whilst the b and the d are distinct, the p and the q are not. The n and the u are distinct. You just got a little bit more of a seraph.
[00:43:03] Our m and w are great. Our number one, our lowercase l, our uppercase I, our zero, and our uppercase O are unique. This is a pretty decent font. This one is the issue right here. We might want to pick one that’s a little bit more common. We might want to go with an Arial or we might want to do something that’s different. What I do typically, if I know I’m working with a font and a design and I want to stay true to that design, I’ll go up to the recommendations because what it’ll do is, first, tell you what fonts that are like it.
[00:43:39] I might come in here. I’m going to say, “Okay. I’m going to look at–” do the same concept where I’m going to look at Champagne Sorbet which is an awesome name for a font. I might go in here and do the same thing and just compare the different ones, just a quick– because we know we’re running out of time and that Google foundry has a lot of accessible fonts in and of itself.
[00:44:04] These are all the fonts that Adobe has. There are specific ones that are from Google that are actually pretty good when it comes to accessibility. I want to go back down a couple. What I’m really doing when I’m thinking about fonts is– this one’s great. This is not a– here’s the link real quick if you want to grab that one too. It’s this idea that you’re not just thinking okay WCAG and checking boxes.
[00:44:30] You’re really having to think. This is the design and this is the aesthetics that I want to stay to. I know people like common fonts. I know people don’t want to be overwhelmed with a lot. We want to make sure its typeface has certain characteristics and that stand them apart from each other. This is more and I think it becomes a little bit more complex even from color.
[00:44:54] Color, in and of itself, is a lot. We add the typeface and the styling. It becomes another thing to think about. Again, it’s not going to ever be, I don’t think, an accessibility where all those perfect. There’s no such thing. The same basic things that we talked about with color I think apply here where you’re going to look at these takeaways and you’re going to say, “Okay. I’m going to check as many boxes as possible.”
[00:45:21] Then maybe I am giving somebody an alternative style like in the case of that javascript button that you can just toggle on and off different fonts if you wanted to. I think what most people do with this one– this one’s tricky. This is not just a hex color. I can’t just throw a variable on top and all of a sudden everything’s filtered the way I want it to. If it’s baked in, there’s nothing I can do about it.
[00:45:44] Definitely not baking in things into images, for instance, text on images, but that concept that you’re also allowing people to add their own style sheet to your website for instance. That’s one way that sometimes people can get around it, making sure that that’s not locked down. Some organizations lock that down pretty hard where I can’t apply my own style sheet.
[00:46:05] There are some different things that you can do about this but I think this one really falls into the lap of the designer or the frontend developer, whoever’s making the font choices, and the font styling choices. This one’s a little bit more tricky, I think than color.
[00:46:25] AMBER: There are a couple of questions about fonts. Let’s see. I’m going to start from the bottom and go back up. They want to know, do you know of any web-safe font with better legibility than Verdana? I need a web-safe font that makes a capital I, lowercase l, and the number one look significantly different from each other.
[00:46:43] CARRIE: Yes. I saw Dave’s comment earlier about Arial and the capital I and lowercase l and those looking nearly identical. I think that’s a tricky one because Arial’s used in so many places. Verdana is used every place as well. It’s all these things. Again, somebody who’s encountered this hundreds and thousands of times subconsciously has learned how to read what that text– even if it doesn’t meet all of these criteria.
[00:47:14] That’s why that number one is there and this idea that if you– and the research shows that if you’re picking something that people have seen all the time, they already know how to work with it. This idea that you wouldn’t necessarily– you could choose one of those even though it’s not maybe perfect on the case of that unique characteristics which is number three. This is why it gets really tricky. I’m going to put that Verdana up there and let’s see what we get. They don’t even have it. It’s too common.
[00:47:47] AMBER: Yes. It’s not on Adobe.
[00:47:52] CARRIE: Yes. I’m not seeing it on there. That’s one thing that I would look at. I would look at different foundries. I would look at different fonts. This is not something that’s probably going to be super fast especially if you’re building the design. Let’s say you’re building a new website and you’ve got all these hex values you’ve got to deal with then your pallets, and your fonts, and the types, and the H1s through the H6s and all that, this one might be one of those things that might take you a little bit more time to sit through and think about. You’re taking your time.
[00:48:24] Once you figure that out, then you can take that and go with it. Like I said, the Google foundry has a lot of an accessible– fonts are for use and the type is successful for a lot of them. I wouldn’t say all of them are 100% but you have a place to go.
[00:48:43] AMBER: I’m curious if you have thoughts on Serif or Sans Serif. One of the talks that I found really interesting at acc-con last year, which if people aren’t familiar with, it’s a free accessibility conference that Deque puts on was– I’m forgetting right now who it was. They had done a bunch of research into fonts. I remember one of the things that stood out for me was they were talking about when you have Serifs and letters like if you put an r next to an n, it will look like an m to a lot of people. I’m curious if you have thoughts on that because I’ve been leaning towards doing all Sans Serif after attending that.
[00:49:20] CARRIE: What you’re talking about is called kerning. It’s when you have a certain number of or a certain space between certain letters. The word, I was thinking of the word barn, b-a-r-n, could turn into bam for some people because of the way that it– the kerning and how close it is. Depending on their vision, their low vision, if they have dyslexia, or if they have other sort of reading disability, they might discern it in different ways.
[00:49:49] I think that jumping straight into that, there we go. I’ll go ahead and pop all those. This is where where this comes into is that letter-spacing being a certain size, word spacing a certain size, line, height, paragraph spacing, all of these things, those are all straight from WCAG. The problem is, is that some of these are not requirements at the double A level, and some people either A don’t know they exist or, or B don’t want to, or want to pretend that they don’t exist.
[00:50:22] This really jumping ahead a little bit, because I know we’re running out of time, is that idea that you’re going to have these particular spacing options, and there’s two tools that I wanted to show on that one, which is called the good line height. I’ll show that in a second and the Golden Ratio calculator. Some of these will help with that kerning conversation as well. This one obviously is more about the height and this is talking about I can type in whatever font size I want, the multiplier.
[00:50:54] If I go back here, I think I need the 1.5. Let’s see at 1.5 times. I’m going to go up to 1.5. All right, and then I am going to do that grid row heights. Again less is more, or more is less, I don’t know. This idea that we can play around with this, hide the grid as well, and we can find something that’s just perfect for the font that we’ve chosen and it tells me right here, my good line-height is 63. If I know that my multiplier is 1.5, I know what my key font size is, and can estimate some of these things like the row height, it can tell me what line-height I want.
[00:51:37] Again, you don’t have to go this far down the rabbit hole on every single time, but going back to you to like what–? Oh, sorry, somebody just can’t even go longer. Sorry about that. What Dave was saying earlier is this concept of, I am choosing one thing, how do I make this, make the perfect typography choice for this particular case, and there’s all these different factors in line height is another consideration that you’re thinking of.
[00:52:09] The Golden Ratio calculator is a little bit I want to see if I can find the veranda one. There we go. All right, it’s on this one. Let’s do a font size of 16 and a content width– Well we know if we go back here again, our content width we don’t want to exceed 80 characters. We’ll go back to their content width of 80, and now we’re going to look at the Golden Ratio typography calculator. Show me, it’s thinking. All right, it’s not. I’m going to refresh it real quick.
[00:52:55] I don’t know why it’s being silly. I think it’s a live demo. Let’s see, maybe I need to increase my content width, let’s change it. Oh, I know, I think it’s because I have the blocker on. Let me see if I can do this ad blocker, let’s try it again. Man sorry about that. I’m all excited. Oh, it’s still not working. All right, I’m not really sure why it’s not working for me today. Except for everything else seems to be slow. Might be sharing too much going on here.
[00:53:38] I’m going to try it on Firefox, if it can load in real quick. Everything’s super sluggish. Sorry about that. Let’s see might be the font. Let’s see that too. All right. Well, that’s a tool I used to use all the time. Now I don’t know why it’s not working, but what it usually shows you is this. The math right, the math find the golden ratio. This is where it gets like super complex but it talks about, the line height goes back to line-height as well but also actually about that spacing unit and typography typographic scale.
[00:54:28] Which is part of that as the kerning unrelated to the font size, I hope somebody else can get this to work I don’t really know why it didn’t work. It just did five minutes ago.
[00:54:38] AMBER: This being a WordPress meetup, we can all appreciate that this is a WordPress site, and in the console, there is an admin Ajax dot php error. Make a new [crosstalk] reach out to one of our developers in attendance today and be like, “Hey, need some help fixing your site?”
[00:55:01] CARRIE: Yes, I literally used it not that long ago. Maybe they did upgrade and had some issues there, [crosstalk] but normally, I’ll see if I can find an alternative for this one too, because I really liked it. It did talk essentially about the thing that you were just talking about. Amber words, it’s about the kerning and how do you know these things? I think that’s the tricky part about typography in general for accessibility is that there’s some clear rules, color contrast, we have this letter spacing, but then we have this question of like, “How do I measure that?
[00:55:35] What tool do I use? What tool do I use now that my golden ratio calculator is broken, right?” This concept of you can do this within your design programs as well. It’s not like I’m completely gone, but there’s a lot to think about there lots of be considering, there’s a lot of different things. The other ones that I didn’t mention here is making sure that we’re using elements like headings to break up sections, we’re using visual elements, lists, numbers, quotations, even design spaces.
[00:56:06] I’m going to go back to that demo screen in a couple more minutes, and show you how I parse them together, I can show you the before and after. We also have that 80 characters per paragraph line. If you’re talking about characters, like Japanese characters then, or any of those that are more scripted, those are exceeding 40. Again, these are straight WCAG, and then we have that line height and letter spacing that we talked about.
[00:56:36] The other thing is that rivers of space, which I think is fascinating too. Let me grab that on here, but what a river of space happens is when you have justified text, I think this one’s justified, and you’ve got these spaces where the eye can go, because it’s justified instead of left align, or in cases right aligned. Here’s a better example here where it can be difficult to read. Sometimes people with reading disabilities will jump lines, because they don’t really know where they are on the page.
[00:57:10] These rivers of space can be very distracting, as well for people with attention deficit disorder. They’re not very good at all. There’s a lot of different things to think about with that one. I’m going to go ahead and share two of them at the same time. Let me scroll out a little bit. Here we go. What I’m showing on the left, just scroll out a little bit more, oops, a little maybe in, there we go. All right, one on the left is the original and it’s like I said, I made it a little bit worse, don’t blame Adobe for that book.
[00:57:47] With Spark anyone can put anything up there in the accessible to accessible and then the one on the right, we have modified, obviously, the color contrast, that should be like jumping right out at you, we’ve changed the fonts from something that’s too unique to something a little bit more straightforward, a little darker, obviously, to stand out as well. On this one, we also had like three or four different font families. We change over here to having like two, one for the bigger letters and numbers, and one for the copy.
[00:58:23] Over here, we didn’t have bullets over here, we’ve added bullets, obviously, the whitespace has totally changed and I’ve also added this element, this design element to it, to rope these together, because again, part of that layout is is putting like things together as well. You can do that in a lot of different ways, and it’s not awful over here, but this definitely brings it back and a little bit more obvious, on keeping it together. It’s this concept that we didn’t do a lot really, if you think about justification, I also changed that.
[00:58:59] Otherwise, that’s a handful of things that we’ve changed and it’s a night and day situation, where one is a lot more, is easier to read. Maybe again, design aside because I didn’t design it, but design aside if you’re thinking about just is it more accessible? Is it more inclusive? Can I read it? Do I understand it? Does it make sense, right?
[00:59:23] This one, I would argue is probably a little bit better than what we started with. That was the quick and dirty there at the end, just because of timing, but if there’s any more questions on that, definitely find me on my socials, on Twitter, LinkedIn and all that sort of thing, and check it out and I can stick around for more questions.
[00:59:49] AMBER: Awesome. Thank you so much, and we do have our captioners until 8:30 [inaudible] for you, couple of more questions.
[00:59:58] CARRIE: Yes, considered a time, yes.
[01:00:01] AMBER: Dave was wondering why do newspapers write justify, or why do they use justified text when it still causes the same rivers of whitespace problem in print?
[01:00:12] CARRIE: I’m not really sure. I don’t know if all of them do, but I know that maybe it’s something historic, maybe it’s something with the block lettering and the way that they used to have to do printing presses possibly, but a lot of the digital copies don’t have that I’ve noticed. Yes, unfortunately, not everyone’s got the memo, about accessibility and inclusive typography, so unfortunately.
[01:00:39] AMBER: Jean said full justifications for columns make the columns more distinct, which might come into play when you’re reading something that might have 16 columns across it, and you’re trying to track just in the one column, so it’s definitely a different situation than web, right?
[01:00:57] CARRIE: Possibly, that’s a good point. I don’t know as much about prints as I do about web, but I just know that those regulations that we have for WCAG they’re very specific about the characters per line, and specifically because of people with disabilities, that ADHD people with other cognitive disabilities, people with dyslexia, they can just jump around to the next line or skip lines, low vision. You could think of different scenarios for all of these different things.
[01:01:31] Again, these are all just kind of guidelines and again, maybe your user your preference with that as somebody with that disability type might be that you like having it full width and not justified, or floated to the left, or floated to the right, maybe you prefer it. This concept of, again, uniqueness and everyone’s special.
[01:01:55] AMBER: Mark said, great presentation, I guess this is the chicken or egg question but when making a design decision, what comes first color or font?
[01:02:07] CARRIE: Yes, chicken and egg for sure. I don’t know, I think I would go font first, and I’m a big color person too so that’s hard for me to admit, but I feel like everything builds off of that, once you get the font family in place, you can really kind of build off of that. Some things just naturally go with certain colors, I don’t know if that makes any sense either, but I don’t know that you’d have to do one before the other, they are their own thing, but there’s a lot more to think about with fonts.
[01:02:40] I guess with color, it’s more fun to me and that’s something that you’ve got a lot of guidance already, so in some ways it’s easy. The caveat to that and I’ve worked with different clients over the years is that when you have inaccessible colors that are brand colors then it becomes a completely different can of fish, and definitely something to think about. It depends on if you’re building this for your fun site, you’re doing a meetup site, website, or if you have a client and you have very specific things and parameters that you have to work with. That’s a good question.
[01:03:19] AMBER: Do you have any advice for talking to clients about their brand colors and encouraging them to select alternate web versions or something? Honestly, I guess they need to color contrasts in their print brochures too, so what advice do you have on that?
[01:03:39] CARRIE: There’s a fellow, and some of you who are in the accessibility world, or know a little bit of– His name is Nick [inaudible] and he speaks about mostly accessibility in JavaScript, but all kinds of different things, but I still remember this, I told him I use this story. It’s got permission, but this idea that he once had a client, and they were very adamant that their brand color could not change, doesn’t matter that it was inaccessible.
[01:04:07] Like, “We’re never going to change this. Hasn’t changed in hundreds of years,” whatever. He brings two different laptops to the presentation, and one is an accessible version of their color, and one is an accessible, their normal hex value, and he says, “Okay, pick which one is your color.” He said, it was pretty split, people didn’t really know because of the variance between devices and how bright my devices, and obviously your glare and other environmental factors to consider, but in this scenario, they couldn’t decipher which was their color and which one was–
[01:04:47] That’s how he won that argument, and I keep that one in the back pocket in case I ever get a client that has their heels dug into the sand a little bit, but it’s that concept that again, there’s so much variability that even the small change that’s going to help somebody, and it looks exactly like it does on this other screen. Anyway, Nixie tells the story better, but I always think about that story when I think about clients who may be resistant to change, that it might be that it’s not that big of a deal, and maybe that change isn’t the end of the world.
[01:05:24] That just having it a little bit darker, helps so many more people and get many more clients and users or whatever it is that they’re doing on that site, gets more people involved, because they can actually read the text. You’d think that’d be a good thing, but everybody’s different.
[01:05:41] AMBER: Yes, I appreciate that story, it made me think of something which I’ve never thought about before, but I permanently have the blue light filter on my phone, I never turn it off and occasionally I realized I was editing my Instagram with the light filter on, and I’d look at them on Twitter, I’m like, “Why does this look so bad?” Then I realize, okay, I got to turn it off just if I’m going to edit a photo, but that’s the thing, no one’s going to see the colors exactly as they are.
[01:06:10] It definitely is harder because we have this with our main or original brand before we started [inaudible] digital was we had colors that were bright, it was like light green, a lime green color, and a gray and it was like no.
[01:06:27] CARRIE: That’s a good point.
[01:06:28] AMBER: I think there are some points where their colors, it’s not just a little darker, like the one you were showing where you’re shifting it, and it has to go really dark, and it’s a whole different color, right?
[01:06:37] CARRIE: Yes, that’s a good point. There’s certain ones like in the spectrum like if you think about the rainbow, you have the the warmer colors like the yellows and the reds, maybe some of the edging here on the purples and the greens here, but these are tricky because the extreme, which is white and black, they’re too much in the middle so there’s nothing that will contrast with them.
[01:07:07] You could do orange and black, but there’s not a lot of brown in there that, or the reverse that happens as well, so the warm colors are super tricky. Yellow, I think is the trickiest color, like you said, the light green I could see that being an issue as well, because of those extremes, they’re not there, they’re too close, they’re too close to the middle.
[01:07:34] AMBER: Shifting back to tight boundaries, Joe asked if there were any tight boundaries either Adobe, or Google that have stated like they label fonts as accessibility friendly?
[01:07:47] CARRIE: Yes and Google says that they all are I just know that they’re not, because you can look right here, that’s cursive, these are all capitals, but it’s that idea that there are certain ones that say that they’re more accessible than others, but I never try, if it’s bad I don’t trust anyone, so I always test my own with those, that example the BBQP1LI0OUW, those are my go to letter combinations that I’m trying and everyone’s different.
[01:08:29] There’s also different ones with numbers and letters, the eight comes into play in some pieces as well, but that’s difficult to read for me. I think you just kind of get a feel for it after a while. This one’s an interesting one, I can already tell it, this one’s pretty accessible just looking at it quickly. Allegria, maybe? All right, and it also depends on what you’re picking, and you don’t want to pick the italic if you can choose, you don’t want the super, super thin or probably the super, super heavy as well, the black or the bolts, but you can see right here.
[01:09:03] Oops, I lost my letters here. I should have just saved them. [inaudible] I’ll just do a few of them. I can already tell on the other page, let’s scroll on a little bit here. We have the different ascenders and the serifs that are slightly different, we got the little tail that’s going on there. See how that one’s floating this way so when I float the B if I flip it, that’s actually going to be facing the opposite way. These are close, but you can tell this is about a heavier weight here and there.
[01:09:49] Here’s our one, that’s squatty. Here is our L and then there’s I, but they’re very unique, they all have their own unique little serifs, and weights, and there’s all kinds of words for all of these different little things that they’ve added. What I’m really thinking about is just that [inaudible] always put a mirror in between and, I say, “Okay, is this the opposite? Essentially, if I put this in the mirror.” You can see that these are unique a little bit more than some of the other fonts that we were looking at earlier.
[01:10:25] AMBER: This one’s a great example. There’s a question and this is shifting gears, but do you know is there some reason why the part of the URL after the .com or .org does not have to meet the text, color contrast requirements in a web browser address bar? For example, looking at your browser right now, the sub-pages or sub-directories /foundry/google is not [inaudible]. Do you know anything about that?
[01:10:55] CARRIE: No. I have not heard anything about that before. That’s unique. I’ve seen that, but I’ve never really thought that deeply about it. I wonder if that’s a Chrome thing versus a Firefox thing. Let’s turn that one up. No, that’s also– I wonder if IE does it better. I don’t know, maybe we’ll get a browser war going on. No, I’m not really sure. Maybe it falls out of that scope. That’s the hard thing about web, you’ve got all the things that you have, plus you have your operating system.
[01:11:32] Plus we have these browser wrapper things as well. There’s so many players and sometimes, for instance focus indicators. If I’m relying on the browser to create the focus indicator for me, the color, [inaudible] tap through the page it’s on them to get it right. If someone came back and said, “Oh, your site, it’s not accessible. I can’t see the focus indicator,” but I have not created my own and I’ve not blocked to the browsers focus indicator, but I have allowed the browser to do it, but it’s still not making the color [inaudible] here, it falls back on them. If you’re talking about who’s responsible.
[01:12:15] There’s another, that’s a lengthy, another rabbit hole to go down to. It’s, again, I guess another variable that you’re considering when you’re thinking about the overall inclusivity of your site. There’s a lot of factors in play.
[01:12:30] AMBER: Rashmi asked. I hope I said that right. Rashmi asked, can you suggest how we should check the color contrast if there’s some aliasing in their letters?
[01:12:46] CARRIE: What we did earlier with the color contrast [inaudible] where I’m trying to get to–Here, I’ll show it. This might not show up very well, but [inaudible] gray.
[01:13:01] AMBER: There’s lighter gray and a black.
[01:13:03] CARRIE: I quickly said it when we were talking about earlier, what I always measure is a straightest line I can, that’s what I find. I find the darkest straightest line. You can see there certain letters like the C and E and anything with curves to it essentially, they’re going to be a little bit more difficult. This is a pretty thick font, so I can catch something pretty easily, but you have really thin fonts too. Here, maybe I’ll try this too over here, where they’re super tricky. I’ve got one pixel that I can choose from here.
[01:13:36] That to me is a little bit more tricky. We’re using black right now, so that’s easy versus some of the colors that we were testing for it earlier. Like this X, do you see how I have these different variations of gray? What I’m really looking for is that one, if I can’t get the hex color, if I can’t figure out what it is programmatically then I am trying, like I said, to find the straightest line I can, or the thickest straightest line I can to compare it to.
[01:14:06] I don’t know if that helps, if that’s what you’re asking about. I’ve had a lot of issues on clients’ sites where I’m trying to pick apart like one pixel width things, and it’s like, “Okay, where [inaudible]?” It’s like anything it’s that reasonable doubt. I’m not going to fail something just to fail it. I’m going to maybe suggest you bump up something if it’s on that border, or if it’s something like that, that’s very thin. I would suggest you to make a little bit thicker, meatier font choice, maybe, but it’s this idea that–
[01:14:44] I think accessibility professionals get a bad rap. I don’t think we try to fail everything. I think maybe some of us do, but I don’t. I like to think about practicality. It’s the idea that you’re pretty close, then we’ll just maybe edge it up a little bit, but otherwise, I’m not going to fail.
[01:15:03] AMBER: Do you ever recommend a handwritten font like that one?
[01:15:08] CARRIE: They suggest not to because it is difficult to read for a lot of people. Even the younger generations that aren’t even learning cursive, they might have a really hard time with that, but other people might as well. I have difficulty reading cursive. To me, it’s the words are too close together. I can’t really decipher sometimes that’s when kerning definitely comes into play.
[01:15:33] AMBER: Art mentioned, and I don’t know this, so I don’t know if you know anything, Art, feel free to add more information in the chat. The target story is pretty compelling for accessibility in general, and I’m not familiar with the target story, but feel free to add more on that, Art.
[01:15:53] CARRIE: Oh yes, please do. I know that they had some litigation in the past, but they’ve turned it around and really become a leader in that space.
[01:16:02] AMBER: Then Jean asked– Art said Target was the first business sued over the ADA, so the Americans with disabilities act.
[01:16:14] CARRIE: Well, it’s complicated, but the long and short of it is the ones that we know that it went to public litigation. That’s a whole another can of worms. I’ll just not say anything [inaudible] or I’ll get myself into trouble with lawsuits.
[01:16:35] AMBER: Jean was asking if you know for columns in WordPress, do assisted devices read top to bottom of the first column, and then top of the second? Is there a minimum space between columns for accessibility if you have columns [inaudible] or paragraphs?
[01:16:51] CARRIE: There is. Let’s see what it says. There you go. Paragraph spacing is two times. That could be in between the paragraphs. If you had one on top of each other or right next to each other. I find that I will always want a little bit more even than that two times. What they’re talking about, if I know the type face size, let’s say it’s 16 points or pixels or whatever it is that you’re building, then you’d want to double that in between the paragraphs, and no matter which direction that you’re going.
[01:17:24] I think that might be the question. Hopefully I answered that one, but that’s definitely, that’s 100% WCAG.
[01:17:31] AMBER: In that example, that would mean if it was a 16-pixel paragraph, you would need to have 32 pixels of space below the paragraph, and to the left or right if there was another paragraph to the side of it?
[01:17:45] CARRIE: Correct. The way that we do fonts with [inaudible] and percentages and base fonts and all that, it can get a little bit more complex if you’re talking about web versus design. You definitely want to make sure you’re measuring the correct thing. That’s the recommended.
[01:18:04] AMBER: I can tell you right now, I 100% do not put enough space after my paragraphs if that’s the case.
[01:18:14] CARRIE: That’s the thing about all of this in accessibility, it’s a moving target, and there’s a lot to know. I don’t know everything. There’s nobody out there that knows all the things. When I first started in development, I was full-stack and then that quickly became front-end development. Then that became accessibility. Even within accessibility, there’s so many experts on different things. Maybe I’ll put myself in the SVG category. Maybe I can say that, but that’s the only topic.
[01:18:48] I know little things here and there, but it’s this idea that you can know a lot about one topic, but then you can be the expert at something even more nuanced. I feel like people think, “Oh, digital accessibility, I didn’t know how to do that. It’s really easy and it’s just this.” It’s like, “Well, actually when you get into it, it gets a little bit, even more [inaudible].” There’s so much nuance.
[01:19:14] You know that for WordPress, that’s the same kind of concept, even just within the variability within just one particular CMS could be completely different from a different CMS, even though they’re both CMSs or frameworks or whatever it is. There’s a lot of interesting–
[01:19:31] AMBER: I don’t know if you have a follow-up Rashmi just followed up and said, thanks for the answer. Do you know of any blog posts or articles regarding [inaudible] listing, and how to measure contrast, or anything that writes about, any writing about that?
[01:19:43] CARRIE: None off the top of my head, but I can definitely look into it, and see if I can see anything else. I can send that to you, Amber, if I find anything.
[01:19:54] AMBER: We always have the recording, and we put links that were mentioned in the chat, or as follow up. If you send that to me, we can include that with the recording. I think this is probably going to be our last question. Do you have an opinion on Verdana versus Tahoma?
[01:20:14] [laughter]
[01:20:14] AMBER: Very specific hard questions we’ll put you on the spot with.
[01:20:18] CARRIE: All right. This is what I would do. If you said something like that to me, I would go and I would find these fonts, and I would pop them in there and I would do just exactly that. I’d look at the sample text. I’d look at all the different things because there’s so many variations amongst even within like the weight or italics. If you know you’re going to have to use italics, and probably good to at least check it. That’s what I would do.
[01:20:46] I have multiple tabs up and sometimes I’d put them on my screen just like across the screen and then comparing them, not only that, but I’m looking at letter spacing and [inaudible] and I’m thinking about the use of them, and then all them, they usually have also these fonts that are like this, but they also have these ones that they recommend that go with them too. If I go down it, whoops, just go straight to recommendation. We have the ones that are just like them or similar to them, and then you have the pairing.
[01:21:19] For me, it’s not like one versus the other, and like this one wins hands down because sometimes it has to be with, how am I using this? Is this the heading? Is this going to be like all the large font? Who’s it getting it be paired with? How many fonts are we talking about? What kind of use case? It’s not always black and white, but if I would do the very first thing I would do just pop and those letters, and check for the clarity making sure that each letter is unique, that’s my first step but a little bit more to it [laughs] a little more to it than that, I think.
[01:21:55] AMBER: Yes, no, it really is. It’s just comparing them and really looking at the granular details and thinking about where it’s going to be used and how big it will be. [inaudible]
[01:22:04] CARRIE: Context. Yes.
[01:22:05] AMBER: Well, thank you so much. This has been fabulous. Do you want to put up again real quick? How people can get a hold of you or just, if you want to tell us right now incase anyone wants to follow up.
[01:22:15] CARRIE: I just stop sharing. All right. Let’s go back to that last slide. You can find me on different places but Twitter, Carrie Fisher, same with LinkedIn and you can check out my website. That’s my blog site, and it has both the light and dark mode and prefers reduced motion and it’s fun. It’s funky and crazy there, but it’s showing you that you can build something a little bit unique, but also it’s accessible, so yes you can take a look at it. It was fun. It was an excuse to have fun. [laughs]
[01:22:50] AMBER: Yes that’s always awesome. I love examples of websites that are accessible and still look fun and cool. I think sometimes people who are less familiar think that it means it’s going to be black and white, and super boring.
[01:23:01] CARRIE: True, very true.
[01:23:04] AMBER: Well, thank you so much. This has been a great presentation. We really appreciate it. Thanks again to Empire Caption Solutions and WP engine for sponsoring, and our next meetup will be the first Thursday in February, which I think is the 3rd. I don’t have my notes up, but you can find it on our meetup page or on [inaudible] .com/meetup. Thanks everybody and I hope you have a great night.
