Hi everyone. In this video we're gonna look at accessibility in Figma. We'll look at a couple of plugins that can help us  and what things you should be watching out  for when you are doing your designs. Alright, let's get started. First up a disclaimer, I'm not an expert in accessibility,  but I wanted to keep it in this course  'cause there's some good plugins. There are some main things  to check out when you are doing the design,  but there's a lot more than I know about accessibility.

But there you go. Take everything I say here with a pinch  of salt and do your own research. So the main things you wanna focus on when you're doing your  design work, uh, on the, you know, Figma side okay is kind  of two main things. It's to do with fonts and how legible they are  and touch points, how clickable some of these buttons are  and how far apart they are. Okay? So fonts and touch points.

So to get started, what I did is I created a new page  with a new frame and I just threw a bunch  of my elements on here that are from my um, main styles. Okay? Because I just wanted to throw them all in  and run some checks to make sure  that we're heading in the right direction. Plus it's nice and clean on this one simple  page with the one simple frame. Now when it comes to plugins, there is a few of them, okay? I don't have any particular love for any particular one.

They're all great. They do enough of what I need to do. So 80 star and contrast search for those in the plugins. Remember these might not be around  by the time you get to here. These change all the time. Some of 'em have paid, some of 'em have free.

We'll start with the one that is quite visually easy,  doesn't have a lot of detail to it, but it's quite cool. So it's gotta contrast, go to run. Okay? And it's run it on my frame here  and you can start to see a few things. Some things are green, some things are red. Basically a ratio, it's something to one.

You see that's 3.1, three to one and it has gone red. It's not good. Not enough contrast. This one here is the same contrast, okay, 3.13  but it's a larger font size. So there's a trade off between the color that you're using  and how big it is and also the weight of it  and what's on the back of it. Can you see here?

Down on the bottom of this one,  the editor will zoom in. So both of these are the same size, the same font weight,  but the bottom one there,  okay has a lot higher contrast ratio. So it's green and the one  above it doesn't have such a good contrast  ratio against that purple. The differentiation between the two is not high enough  to pass the test. Who makes the test? Most accessibility tools refer  to this document here, this big ugly  W three C document, okay?

That's what you're looking for. If you want  to go further into this, you'll see that word around the uh,  WCAG, the wcag, nobody calls it that,  but it's the web content accessibility guidelines. Okay? Uh, and you will find proper descriptions  with examples all through here. It's quite tricky to use. I end up loading it up.

Okay, I've ended up in this quick reference. This will change. Okay, we're using V two,  I think they're drafting up V three at the moment,  but I just do a search for contrast non-text contrast,  I'm looking for contrast minimum. Yeah, there we go  There. And let's look at the full description. Basically it says large text has to have a contrast ratio  of 3.1 logos, okay?

With text in it doesn't have  to have any contrast requirement. So this is where you go to kind  of like upskill your knowledge. Now know that there's an AA and there's a AAA down the top,  but on the bottom here you see this needs  a seven to one, okay? A much higher contrast ratio. You'll see here in this plugin  that you can switch between these two. You see, even with the large texts, it's the wrong color.

So there's not enough contrast radio to get AAA rating  and you gotta check to see which contrast  ratio you are aiming for. Now in fairness, I've never worked anywhere  that's required any accessibility like requirements,  no legal requirements. But I'm sure if you're working for a government agency  as well, I've done work for government agencies  and whilst they might have requirements somewhere tucked  away, there's nobody actually checking them. So it's kind of up to me as a designer  to make sure I'm implementing them. And if there ever was an audit,  I would fail on this bit of text here. So how do we get round it?

This one here, you can just play around with things like,  uh, this thing's cut big, my small screen. Let's do it with this one here. So let's say, uh, let's adjust the weight. Okay? I am jumping the weight up using my sweet shortcut from  earlier control option greater than less than. And I'm gonna refresh it.

It's bigger, it's still not working. So to have a look at my colors, so I'm gonna go over here,  I'm gonna go to my, let's say my seven hundreds. Let's see if that will pass the test. So it's changed to the 700. Let's run it now it's got a much higher contrast color  ratio and it works. You can see how important to kind of understand a bit  of this early on in the design just  to make sure you have got colors  that don't look like danger.

Um, you know, I picked the red, which I don't like. It's a bit of a pain, but at this size here it works great. Now just so you know, some of the basic rules  are this stuff here. So if it is 18 point and not bold  or above, it's considered large text. You get away with a lot lower contrast ratio. Large text is is also considered 14 point,  but only if it's bold, it's still considered large text.

Again, you get away with a lot lower contrast ratio. So contrast ratio for fonts is a mixture of the font size,  what weight it is and  what color it is compared to the background. Let's have a look at another useful tool. Let's have a look at stuck. This one has a bit more into it. There's a paid version of this as well.

But let's have a look at the uh, contrast. I'm gonna dive into my button here. Okay. And it's telling me these two here, it's passing  the AA test, okay? It's considered large text. It's got a 3.1 contrast ratio.

But if it was normal text, okay, non bold,  smaller than 18, it would fail it. It has suggestions. You can see there it's um, uh,  referencing the WC. Okay? So early on in your design,  once you've got some text styles, do a little bit of a test  with Stark or one of the other ones. Remember AD is good, stark is good.

Contrast is handy just to see are you designing something  that is gonna eventually have to be changed anyway. Like our early bird is too small. And when it comes to text, text is considered stuff  that has to be read and usable. If you've got text that is like, uh, so have a look  here, there's text in the background here. This would fail the contrast ratio, uh, greatly. This is considered incidental text.

It's like pure decoration and it serves no user purpose. Like it's just as a graphic  so you don't have to worry about those. But then sometimes you run into stuff, it's like,  is it usable, is it not? That can get a little tricky. The contrast ratio is a  science, but it can get a little bit messy though. Let's talk about touch points.

Uh, so let's look at this one. We just happen to be on this page. It is 32 by 32  and that's what I'm using for my um,  shift E for my prototype. If I click on this and go to this page,  that is a touch point. And the touch point is considered not the graphic  but the active area. So if I go and preview this,  it's the bit that can be clicked.

Can you see down the bottom there? That's that kind of active area  that is the kind of touchable area. So what you can do is you can sometimes keep, like,  that'll fail a touchpoint test. Okay? So what is the rules for touchpoints? They're different for different operating systems.

So on Apple, okay, they want the touch area  or the touch target to be, we've got it 32 by 32. Apple want it to be 44 by 44. That's the minimum size. Android is a little bit bigger. 48 by 48. And because Android's owned by Google  and Google run the internet,  it's the same size for websites as well.

48 by 48. And Google has ways of doing tests to test how things work,  especially on mobile devices to see how you rank  for search results. So it's an important thing. So let's look at a way  of getting that to stick the same size  but be the, let's say 48 by 48. So I'm going to go to my main component. Okay, here it is.

And you see 32 by 32. I could just make this thing, uh, 48  by 48, but it's too big. I want the touch point to be bigger  but not necessarily the icon. So I'm gonna undo all of that. And what I'm gonna do is I'm gonna make sure I've got  the parent, okay? And I'm actually going to, so it's in our main component.

There's the vector inside. I'm gonna grab the outside  and remember the shortcut from earlier. You can hold down the command key, okay? On a Mac control key on a pc. And you can actually change the frame size  separate from the icon. So you could move it out that way.

It's easier probably just to select the parent,  make it an auto layout shift a,  and I'm just gonna add some padding. I'm gonna add it all the way around. Remember the option shift or alt shift, okay? Or you can just do it manually over here, type it in. What you're looking for is a total of 48 by 48. For me, I need to add eight by eight.

I think that's it. Here we go. Total of 48. So all this padding will be included in the touchpoint. So I'm going to update it. Option three say, published all the pages.

It's being used in a few places, so I've gotta be careful. Let's go back to here. Let's go back to this option. Let's review and let's update them all. And you can see back here, this is updated. It's 48 by 48.

Should be able to test it. Now if I kind of click away, it's kind of suggesting where  to click, but you can see the touch area is much bigger. Okay? So that's 48 by 48. If you're developing for an iOS app, they want it  to be 44 by 44. Now this changes go double check.

Don't take everything I say for gospel. Go and do a little bit of research  for the platform you are developing for. The other thing that is consistent between both Android  and Apple and website design is a 16 point gap between them. So this has a huge gap. So they'll work out fine, but any buttons  and icons needs a minimum of 16 points between them. Alright, last things to consider.

Those are the main ones, right? Getting the font size  and the contrast, right? Making sure the touch points are big enough  and there's space between them,  but there are lots of other accessibility,  uh, things to consider. It's looking at your persona. What age demographic are you working with? What are their technological abilities?

Doing the minimum might not be enough for your audience. Other things you can look at are things like, uh,  colorblindness and poor sight. Some of the apps have helped with that as well. Let's have a look at, let's have a look at this one here. Ad gonna run the colorblind simulator. Okay, I'm on their free, free account,  but I can select my art board.

Let's find one that has some content on it. Let's click on this one. Okay,  so I'm gonna use the uh, comments, art board. And what you can do is you can pick a type  of colorblindness, okay? And then you can switch between them  and a see what it's gonna look like to somebody else. And is it still usable?

Is the con contrast ratio high enough? Again, there's a lot more to accessibility. Just covered some of the basics here. The main ones that affect our design side,  there's a lot more that goes into the development side. Okay? Uh, people  that need things like alt texts when it comes to images,  screen readers, how the keyboard  can navigate through a website.

There's lots to think about when it comes  to accessibility, but there you go. That's my kind of overview,  but take it as just a starter  for learning more about accessibility. Alright, that's it. Uh, I will see you in the next video.