 So good morning everybody. My name is Sarah Cannon. I'm a short white female with dark hair and eyes I'm wearing a black pants outfit. My pronouns are she and her and I'm a web design consultant based out of Birmingham, Alabama So it's really nice to be here on the West Coast where I thought it was going to be nice and sunny But it's more like Alabama weather here. Hopefully it'll clear up by this weekend on Sunday, and that'll be awesome So but today I'm here to talk to you about Designing for accessibility As a designer this topic is something that I've slowly learned more and more over the years And I wanted to share design methods with you today that we can all integrate into our individual design practices In order to create a more inclusive web for everybody a web that can be easily accessed regardless of disability And I always like to say that I am a lifetime student And I'm learning more and more every day about how to make designs accessible So who's this talk for? designers such as myself who work in a layout tool such as Figma Individuals doing site audits for accessible design and basically anyone wanting to sharpen their accessibility skills or Increase their awareness. I want to open the session today with a quote by Tim Berners-Lee that I love so much The power of the web isn't as universality Access by everyone regardless of disability is an existential aspect We are champions and creators of the internet. That's why we are all here at work camp And I believe that we have a moral obligation to harness the power of the web and make it a place for everybody And this is essential to why I feel passionate about giving this talk today Because I've been digging deep into how I can make accessibility part of my design process And I want to encourage others to do the same This topic is just so huge that there's really no way that we can cover everything in a 45 minute session So we're going to cover a lot of best design practices and how they relate to accessibility as well as other tips so What do we need to consider when we talk about accessibility the world is a very large and diverse place So we need to consider a bunch of people when we design that aren't necessarily the average users They could be people with visual impairments such as partial or complete vision loss colored blindness elderly Situational impairment people with auditory impairments motor skills Impairments such as loss of use of missing limbs arthritis broken fingers people with cognitive impairments such as brain injuries learning disabilities seizures literacy people environmental factors such as non-native speakers and People temporarily have that have the inability to listen to audio or read Some people use tools to assist them in accessing the web and content The average user might use keyboards mice and track pads touch pads like touch screens But others might use tools such as screen readers customs cursors or eye tracking There are just so many various ways that people can access content and it's important that we start paying attention to Accessibility in our designs in order to ease the barrier of entry regardless of what tools tools people are using So with that being said how accessible is the web anyway? This is kind of sad and 2021 web AIM didn't access a billion analysis of the top 1 million home pages and found that 97.4 percent had accessibility failures I Believe that we can do better and that we are obligated to we need to dig deep into ourselves and find empathy for end users and incorporate accessibility into our routines in Her e-book giving a damn about accessibility Sherry Burn Harbor says good accessibility is about compliance, but great accessibility is about empathy So good accessibility looks at the product the great looks at the entire user experience from start to finish So if we can try to empathize with any given person's experience We will teach ourselves to make better design choices from the start If you would like to read Sherry's e-book go to accessibility Dot ux design dot cc It's a great resource for anyone who needs to convince themselves or others maybe hire up the importance of integrating accessibility into design practice We need to pay attention to design best practices in order to make the web a better place So we also need to take extra care to think about how our design choices affect the greater community Some of these practices I'm going to go over today. You might already know because they're just good design practices Even so it's good to refresh with an eye for accessibility So why do we need to pay attention to our typography when it comes to accessibility? Typography is the medium in which our content is conveyed So if this content is difficult to read and confusing the consequences are really dire Good typography equals better readability, which equals ease of cognitive load It's really important to convey our content without causing confusion for our users or straining Everything has a compounding effect the more and more difficult the readability is the more frustrated your user will be And if you heard Christina's Demer's talk yesterday, it will use up spoons So definitely check out her talk if you have not already. It's amazing So what are some things that we can do with our typography to increase our accessibility? I have six rules of thumb that I want to share with you today One is to simplify your body fonts ornate body copy can be very difficult to read So simple is obviously better I can see this a lot done in fancy girl boss themes where they have tele-sized seris fonts They make it look cool, but really in fact, they're very hard to scan and read even for an average user Number two is to watch your paragraph widths Too wide a paragraph text makes reading from mind to line challenging You can get mixed up of which line you're reading if you want to keep your width You want to keep your width around 60 to 80 characters I see this a lot in the block editor actually because you can set your block and just because you can make your text The whole block width it does not mean that you should you should make sure that you could constrain it So when you're working in figma and in design and on a grid This also applies so you can have a wide grid and figma and it could be very easy Just span your paragraph content all the way across But really this obviously breaks our rule We want to constrain our paragraph text for readability and trust me the average users will love you for it And don't forget to constrain on wide screens, especially when you're Like when you have a large monitor and you are doing full width and it goes like all the way across You don't want to like have to move your head to read everything or to see everything Make sure you have some constraints in place Number three is kind of obvious that this will increase accessibility But use large body copy It's obvious that small body text is hard to read. You want to make sure your body copy is 18 pixels or higher Small body copy is basically a remnant of the constraints of print in newspapers and magazines But we don't have those constraints on the web people are used to scrolling So on a side note as well, don't make your smallest text like your metadata and your categories below 14 to 16 pixels You want to be able to be People to be able to read your content with ease even if they have some limitations Number four is pay attention to line height This can often be overlooked and people can just end up using default line height Light heading lines can be difficult if they're very far apart And constrain paragraph text is very hard to read The solution is to reduce the line height on your headings and make your minimum body line height at least 30 percent Basically, you need to use your intuition here because different fonts act differently by default, but this is a general rule of thumb Pay attention to it. It'll also make your designs look a lot more professional Don't ever justify your text Justify a text creates gaps or rivers of spacing in the text causing the content to be harder to scan So you want to left justify your body copy. Is that easy to read? When centering don't center text. That's longer than three lines So if it's longer than that, you should just left justify it to prioritize readability It's pretty agonizing to read a very long paragraph that is centered Number six is minimize the use of uppercase text Headlines in all caps are very hard to read. So we want to limit the text The limit the uppercase text that is not user inputted such as categories for metadata So that's capitalized only by css So this reduces the error of a user typing in all caps into the admin Because they can't you know, they can't do it if it's something that is not user inputted And this is kind of problematic if people type in all caps because some screen readers might actually read all caps as acronyms And that makes it very difficult for some people so if you're going to have Some meta that's in all caps such as a category or a date Adding letter spacing to it also helps improve the scan your scanning ability of the metadata with the all caps So here are the typography tips today just to Recap simplify body fonts watch your paragraph widths Use large body copy pay attention to line height Don't justify text and minimize the use of uppercase After our quick typography lesson today, let's talk a little bit about links Links are an important function of the web and very imperative with navigation If it's difficult to navigate your site, you can see why this will be an issue I have six rules of thumb for links to share with you today The first one is to not rely on color only for links or communication Using color only can get lost in gray scale Although the left the link on the left Looks very well defined for people that see color If you viewed on the right in gray scale note that it's very difficult to define from the rest of the text It would be easy if you're colorblind to not even know that link is there If you're going to use color always pair it with an indicator So if you choose a color, that's perfectly fine We all want to have beautiful colors in our designs But make sure there's an indicator with it such as an underline So that's easier to tell that it is in fact a link Here's another example of utilizing an indicator rather than color alone Someone who is colorblind will not be able to tell the top two apart from the access or error message based on just the color So having an icon will make it so that they can Number two is make links easily distinguishable. The underline method is great But underline and bold is even better And if your link is going to leave your site or open up into an external window Adding an icon can be very informative Making distinguishable links to content obviously further enhances the experience of the user And it's an important information does not get lost Number three is don't bold on hover This is something that's extremely common but if you When you do this the hover effect can cause the content to completely shift So if you want your link to be bold have it all ready to be bold and then add a hover state on top of it Such as removing the underline or adding a highlight So it definitely don't reverse the effect and unbolt your link because it'll also cause the same sort of content shift Because bolding and unbolding can move the text Number four is maintain target size minimums Too small target size for touch or mouse And unpadded links are difficult for a lot of users as it requires a very high level of accuracy To click or touch The absolute minimum target size should be 44 pixels by 44 pixels And at least eight pixels between elements An additional padding is even better Sometimes you can say oh, that's more of a development issue But you as a designer can make sure to annotate it for development It's a good idea to be extremely aware of how sites are built and communicate best practices to developers as a requirement So that accessibility doesn't like slip through the cracks on your site Number five is to make focus states obvious First create focus states in your designs One way to do this is reversing That's a a great way to have a very obvious focus state So is using a contrasting outline But be sure to provide development with everything they need to be successful Just don't leave anything up for chance If you don't give developers states sometimes there might not be any I've seen this happen Where someone had a beautiful design, but they didn't include any hover states or any focus states And the design came back from development where there just wasn't any It was just you hover over it and nothing happens at all So you want to make sure that you just don't leave these things up to chance and as a designer Make sure that you take these things into account Number six is don't override cursors Let the user determine their own cursor size as you can see here in your system preferences You can have a normal cursor size and go up to very large. This is very very important for low vision users Because they set the cursor size to the size that they feel most comfortable with that they can see the best that helps them navigate properly Imagine that you're consuming content on the web You have a web page and your cursor is suddenly gone and replaced by a custom design one But say you are have Issues with vision and you need that custom cursor and now you can't track visually where you're even are You're suddenly extremely lost Or even more horrible imagine that the cursor cursor has suddenly turned into a chicken wing True story Iowa has given a site design to audit for accessibility Which was designed by a client's internal designer and lo and behold the cursor was a chicken wing on top of a chicken wing photo Can you even see the chicken wing? This is the stuff of nightmares to me Whether it's a chicken wing or not imagine how bad it would be for a user with low vision Or other cursor needs to have that tool that they use to navigate suddenly change or disappear So luckily we will we were able to convince the client to ditch the chicken wing and go with a normal cursor that way You know people that have um their cursor set to whatever that they feel most comfortable with can See their cursor in the way that they choose So some link tips That we've just gone over don't rely on color for links or communication Make links easily distinguishable don't bold on hover maintain target size minimums Make focus states obvious and as a bonus Don't override the cursor Moving on from links. What about best practices around forms and accessibility? Forms can be a very big source of frustration. I'm sure every one of you here has had a frustration with a form at some point in your life It takes a very big cognitive cognitive load to fill out a form without error So I have four tips to share today on creating accessible forms One is placeholder texts are not labels and they shouldn't replace them Placeholder labels disappear on focus Have you ever started filling out a form and then had to click out of the field because you forgot what you're supposed to be Inputting into it because the placeholder text was used as the label Doing this can cause users to lose track of what field they're entering into And so labels should always stay visible in any state of the form in order to avoid confusion The only exception here is that if it's a one field email sign up And it's coded properly for accessibility But me personally I tend to just avoid that all together and have proper labels on everything that I do Another thing to note Is that you need to ensure the color contrast between the placeholder text and the input value Is obvious that way it's evident whether the text is real content or a placeholder You don't want to end up in the situation where you think you've filled out all the fields because you mistake placeholder text For the actual input and then get an error number two Is explanatory labels help provide more context I worked on a project where you sign up for an academic portal And you enter a username and an email on sign up users were confused about One why they needed a username or what email to use to sign up Instead of just saying username have a more explanatory labels such as your public username That lets them know that others on the platform will actually see What they put in that field this can avoid a situation where they might put Maybe an old embarrassing high school handle that they used to have into that username field And not know that it was going to be public Also having an explanatory label such as your campus email Assist on letting the user know that the email that they actually need to use To sign up is the email that they have from their campus rather than a personal email So this way they don't get an error thrown at them immediately making it Harder for them to complete the form and to sign up So when we did this little change Making this obvious really helped up with sign up retention and support requests number three is Be clear with your required fields With that requirement indicated we don't know what is required and We want more context for our decisions So asterisks are okay But sometimes they can render small but you have to be very careful with them making sure that they're very clear But clearly stating that something is required is even better Also, if there are more fields required than not switching to say optional on the non-required fields works just as well And it reduces clutter We also want to utilize expanded content for further context If we are unsure and need more instruction We don't have any if we don't have any info to have any context to expand So providing further info in a tool tip from an icon lessens the cognitive load of the form And insists with any rules that are needed without leaving the form For instance here you might hide in the tool tip. What do you do if you do not have a campus email? Now you don't have to leave the form to get the information or you know just you know give up Lastly number five when it comes to forms is that if you're going to use placeholder text make it informative Don't let your placeholder text be vague and repetitive Let the placeholder text help the user by giving context clues with the input formatting So instead of saying phone number phone number date date email email You can have phone number with some placeholder text that gives you context clues at what kind of format you want the phone number in What kind of format you want the date in that sort of thing This is very effective in helping people when they're filling out forms So to sum up our form tips for today Placeholder text should not replace labels Explanatory labels provide context be clear with your required fields utilize expanded content for further context And if you're using placeholder text Please make it informative for the user Moving on to color and contrast Here's a section that i'm extremely passionate about because you know color and contrast are extremely major elements that create design So you've seen a lot of girly thing today girly themes today low contrast elements It might look pretty, but it's not that easy to read And even worse is if it gets into a trendy handwriting font Color and contrast matter. That's why there are guidelines To what we need to hear to We haven't talked about the wcag guidelines yet But they have an accessibility success criterion This is extremely important for when you're not only try to audit a site for contrast But when you're designing from the get-go contrast ratios matter We want to always meet level double a criterion or level triple a when needed You can find the whole document at w3.org Slash tr slash wcag 21 It's great to browse through even though it's a little bit dry, but it's very important So what we want to try to hit on every single one of our designs is level a criteria So the visual presentation of text at least 18 points or 14 point bold has to have a contrast ratio of 4 to 5 to 1 Texts and images of a large scale have a contrast ratio of at least three to one and for non text such as different components Of user interface like form fields icons, etc They we want to have them to have a contrast ratio of at least three to one So people don't skip over them and they can see them So always look at your contrast ratio no matter what this goes for everything with just a few exceptions for AA compliance You want to have that contrast ratio of least 4.5 to 1 And you can you see how here on the left this button that's a light blue doesn't quite meet the success It's a 2.02 to 1 it fails everything But if you darken the button you can pass a lot of With a contrast ratio of 4.98 to 1 So this is essential for our users with low vision or vision impairment such as color blindness So how do we find out our contrast? Well, if you're using figma, there is a figma contrast checker plugin simply titled contrast And this with it you can select two layers and run to get the contrast ratio and the wcag compatibility So if you have say a brand color that's very light and you want to darken it for compliance You can check that contrast and see okay. I need to darken it so much in order to make it compliant And there are certain tools that you can use to darken your color I like to use a quick tool called pine tools comm slash darken color And here you can add any amount of black into your brand color and get a value that is darker It also has a light and color tool as well. It's a very rudimental Web tool, but it's great to use for brand colors where a subtle shift in color can mean being AA compliant Color can get easily complicated Especially when you're working with previously established brand colors Sometimes it takes showcasing to a client what colors their brand can work In different scenarios. So here's an audit for a client's brand colors for small text to meet AA standards You can see that the colors sometimes only pass in certain combinations And you really need to go methodically through and establish what is and is not in compliance In order to get the best understanding of what your design choices can be and using these brand colors There's a tool called contrast grid that will help you with this methodical checking You can go to contrast dash grid dot eight shapes dot com and input your color choices And it will tell you how they interact together as well as their level of compliance There's also a figma plugin for that called contrast grid It's pretty powerful. So I don't necessarily recommend using it for anything client facing Because of how quickly confusing this grid can be to some of them But for my own sanity when working with color, it's a great resource to get ratios quick Let's take a look at a use case where I had to audit a client's design where their brand color is orange Not just orange, but orange on a peach background not a white background a peach background Orange is a very bright color And it can be very deceiving where you might think that has enough contrast. It doesn't So I did take a look at its contrast ratios and made some adjustments Let's just take a look at how difficult orange can be and how nuanced this can be Take a look at these two buttons. For instance, which button do you think has the higher contrast? The black text or the white text? black white white I heard both If you said the black text on the left, you're right and it's by a long shot That's that's kind of crazy to think about how It's like basically double the contrast of the white text on the button But visually we tend to like the on the orange button You know, we kind of avoid sort of the halloween theme going on You know, it just makes it a little bit more like clean looking to us But its contrast is just way lower than the other one So for this client's audit, I took their blank brand colors and showed the contrast for all of them when they were combined with each other I determined that we needed to make some adjustments for our orange as you can see in the upper left That it does not pass at all in any way Not small text, not large text Like they're they're cut the two colors that they want to use just do not have enough contrast when working together So we have some options here we can either lighten and wash out this peach color or we can kind of Darken the orange and keep the peach color. So we're going to give these options to our client In order for our large text to be able to have a contrast ratio that is needed So we end up just darkening the orange just slightly and you can see here It is not that big of a difference But when it goes to grayscale, you can see that it definitely is a little bit darker But it's just enough to push us over the edge so that we are compliant The difference is very subtle, but it does solve our contrast contrast dilemma here So you don't have to read all this, but when I presented to the client after documenting the audit I'm like, okay, we now have this option to use even though we had to modify the brand color very slightly We could keep the peach background You know, this is a very controversial thing sometimes because when people have their brand colors They are in love with them and they don't want to modify them But sometimes in order to keep the aesthetic you might have to make some little changes It's in order to keep the client happy and make sure you reach compliance A great basic primer e-book for diving into the world of color and contrast is color accessibility workflows by Jerry Cody And you can get on a bookapart.com. It's just a very small primer And it's great for just wetting your feet into the world of color accessibility workflows But if you're looking to dig down deeper into color theory on the web I highly recommend the website colorandcontrast.com There is a ton of information on color and visual perception I have learned a lot from this site when it comes to color theory and I think it's a great resource So while we're still on the subject of color and contrast We also want to make sure that we think about users settings for dark mode and light mode In their system settings on a mac they can set appearance dark or light as their preference And we can actually utilize this and create beautiful versions of our site that honors that user's preference You can see how this is targeted with the prefers color scheme media theory query We can really pay attention to our site designs no matter what mode the user is set and create a great experience in every situation By loading additional styles We can also make sure we want to do this as well for high contrast mode And a user system settings they can select increase contrast as their preference This lets the user determine that they want everything to be high contrast as much as possible And as designers we can utilize this setting and Introduce a more high contrast style sheet Such as one that is actually AAA compliant for their upping the accessibility standard for these users And we we can do this by targeting the prefers contrast more In media query and introducing an alternative color scheme inside that media query This is very important for low vision users So i'm only going to briefly talk about content accessibility Because you know sometimes the designers we have controller content and sometimes we don't But we can all really know we all really know that too much information can definitely lead to cognitive overload And the structure of the content matters greatly in reading and accessibility No one wants to get lost get frustrated confused. No one wants to have to think too much No one has to not be able to access what they need Or no one wants to read or listen to a novel when it can be explained simply So we have some content tips today We want to provide Skip to nav or skip to main content links for screen readers We want to simplify and keep our paragraph links to a minimum If we want to provide deep content we can link to it on a separate page where users can go if they want to dive deeper But no one wants to read or listen to paragraphs and paragraphs of text And they're likely most not going to most just not going to do it. Anyway, they're going to skip it And not even read it or skim it But people who use screen readers will often listen to text sped up And if your site is wordy, can you imagine the amount of time it would take for someone to get through it? A lot of time so keep your Content simple and your paragraph links to a minimum Also, don't use complex words or be superfluous in your writing Make sure you're writing as simple. This is also good for non-native speakers and it will translate more accurately with language tools Maintain a consistent navigation so users don't get lost Ensure all necessary information is visible and accessible to users on On devices that don't support hover states such as touch screens And that we don't so we don't hide any content under hovers This obscures information for people who might need it And always always use clear headings that are in order without skipping any don't go from h1 to h4 Really just organize your content into clear and orderly sections and that will tremendously help screen readers navigate your site So alt text is used with images to describe images to lower non-vision users We want to make sure that all images are that are part of the content have alt text So this is highly important to convey your content But we don't want to put alt text on images that are not necessary for information No one wants to hear description of design element like decorative squirrel when you can just leave that off Make sure your alt text and copy complement rather than duplicate each other Say you have a website that talks in detail all about Jupiter's moons and lists their names And next to it you have an image of Jupiter and its moons You don't need to name all the individual moons in the photos alt text as names are already noted in the content So users using screen readers don't need to listen to a list of the moons named twice and to in order to understand what's in the photo Video and audio are important content types Some tips here include that you always want to include transcripts and subtitles This is very helpful for you users whether user has permanent hearing loss Or sometimes are in an environmental situation such as a plug setting without headphones You always need to include transcripts and subtitles so your content can be consumed And use audio descriptors in your videos whenever you can This could come in a form of a voiceover describing what someone in the video is doing Bonus points for asl is included in your video. You can reach even a wider audience that way And I want to empathize this strongly. Do not auto play your videos This is incredibly jarring to some users put the power into the user's hands. Let them control the video's play or not There are many resources about audio and video and you can access videos about good practices on rootedinrights.org access that It has some great resources for including transcripts and audio descriptions And lastly when it comes to content try to keep it gender neutral If you ever need to illustrate a persona for instructional content Keep it gender neutral and call the person maybe jade and doe instead of john or jane There's just no reason not to take this one extra step towards inclusiveness Motion is making a comeback in web design css is making it pretty easy to do How are people with cognitive impairments like brain injuries or learning disabilities? Vestibular disorders and seizures motion can be extremely jarring and making people confused or even sick I'm not advocating against motion. It can be beautiful tasteful and even helpful for the user But something we need to be aware of is the reduced motion setting A user that needs reduced motion to make accessing content easier can set reduced motion in their mac accessibility settings And with this setting we can target css animations parallax and just to slow or eliminate certain motions We can use do this by using the media query prefers reduced motion With this media query we can target animations and transitions And basically respect the user's wishes not this is disoriented or sick when accessing our site's content If you want to dive deep into motion its implications tools and best practices I highly recommend the talk making motion inclusive by val head Check it out on event apart.com. It's fabulous Dyslexia is also something that we need to take into account A lot of people struggle with dyslexia and it can make reading comprehension extremely difficult Luckily, there is a font that's open an open font license Called open dyslexic which is created specifically so that the letters have weighted bottoms Assisting the brain and comprehension and readability Anybody can use this font. It's open source And this font is starting to gain traction and it's even seen on the Kindle app Here are some screenshots of my Kindle app on my iphone I open the font preferences and I change the book to open dyslexic and that is just um, it's a great tool for people that Um needs some help in reading How great is that? There's even a browser extension for the font that changes copy and web pages So we are gonna i'm not saying that we need to make all of our Copy open dyslexic font, but so how does this apply to us as designers? Well, we want to make sure our site can be altered by browser extensions And that all of our content is in text form and can be changed by the browser extension That and so that way none of our texts are inside images, which we all know we shouldn't be doing this anyway But I wanted to let y'all know that this tool is out there and people are utilizing it And it's pretty revolutionary revolutionary for some people, especially for Children learning how to read So you've been putting in all this hard work to make your designs accessible How do we make sure that we hand them off to our design development? That to development so that nothing gets lost in translation. Well, we can annotate our design files We can annotate them for accessibility before handoff You can find many kits for annotation in figma such as this accessibility annotation kit by indeed or you can build your own Handing off designs to development, which is much documentation as possible ensures that all the effort that you're putting into creating a more accessible web Is not lost This way the site will be built with the best accessibility standards as possible while also maintaining design integrity There's really no right or wrong way to do this But just do your best to pay attention to detail Work with your development team determine what types of annotations they appreciate on handoff and make sure that the communication is best as possible And always with your design before handing off create an accessibility checklist A one one y project.com has a great checklist for your site or any sites that you might be auditing be sure to check out this really informative site and make sure that your designs meet their criteria A the topic of accessibility is just so huge that I can never cover everything in this talk So in case you missed it yesterday check out sally thones talk a rookie's reflection It's never too late to learn. She has a ton of accessibility resources and her enthusiasm is very inspiring So we've gone through a lot of content today But really what we need to remember is that no matter where you are on your team Whether you're a design dev qa content or if you're even building on wordpress solo We need to all work together in order to make the web a better place for everyone So when it comes to design designing with this accessibility in mind It takes a lot of effort in a small village But it's so worth it because in the end you have contributed to a more inclusive web I'm a forever student and I've loved getting to learn more about designing for accessibility And so I really hope that this talk has inspired you in some way to put some of these practices in place So thank you Do we have time for questions? Three minutes. Does anybody have any? Whoa, what do you do? What what do you what is your approach when you have a client? I know you do consulting or audits or whatever When you present that information to a client like your orange and peach and you're like look And they're like, yeah, no or they you know say well That's not as you know, they want accessibility But they're like resistant to it for design purposes or for whatever reason. What's what's your approach to that? Um, a lot of times you can talk to them about How they might will be limiting their audience and sorry like get with them on a business level Um, but when it comes to clients that I work with we talk about accessibility upfront from the very beginning And I think that's very important when you're talking about doing some designs for somebody Talk about it upfront up first and say This is a focus that I have making the web a better place for everybody And just letting you know that this is going to be a focus of your designs or the focus of your audit And making sure that everybody knows that that is something that is going to be established upfront Is also a good way to convince them one more You you mentioned in your talk a color contrast plugin, but I went to wordpress.org and I put in color contrast And I couldn't find it. Oh, it's a plugin for figma to design tool Okay, it's not for wordpress or and then for checking color contrast for your website Which tool do you recommend the most to give you that number score? Um, you can use the one that I mentioned the contrast grid It's an online web page and you can just input in your numbers and it'll give you contrast So if I google contrast grid, I'll find it. I think it's contrast dash grid dot com. Okay And basically you can take your hex values and put them in and then it'll give you the values Okay, thank you All right. Well, thank you everybody And I hope everybody has a great rest of the day and enjoys lunch