Hey and welcome back.
We're going to talk about visual patterns for accessibility.
There's several things we can do as designers to really make our designs accessible.
And also there's things that we can do as designers and to influence developers to ensure that our products
or live products are actually accessible.
So let's jump right in.
The first thing is color contrast.
Now, this is the first step towards an accessible UI and it's to get the color contrast for your product.
Right.
Color contrast is a really, really important part when it comes to visual impairments.
So getting this right will help those with visual impairments to see and to discern information on the
screen.
You'll notice over here there's a little screenshot I took from a tool that I use called Color Shape
that actually shows you the current ratio of your contrast and the goal ratio.
So this is a compliant and all these colors can help you pick a palette that would actually be compliant.
So what is that contrast ratio mean now?
The recommended contrast is three to one for large text and four point five to one for small text.
This is the real ability from the difference between the foreground and background color.
Larger font is categorized by any font larger than 18 pixels when bold or larger than twenty four pixels
for regular font weight.
Small text is anything smaller than 18 pixels.
So you'll notice over here you could do it with UI components as well.
And we'll get into the different areas where we can essentially use these as guidelines rather than
rules, because sometimes so in contrast, ratios don't necessarily work as well as we would think they
do.
But it's totally up to you.
Use your best intuition and test, test, test.
So here are some of the tools that I actually use.
Color Safe is a great tool.
If you're starting a project fresh and you want to choose colors and check the contrast ratios before
you actually make a palette.
And in some products that have an established color system or set up brand colors, you'll need to find
contrast ratios that work from the product's palette.
And what I usually use for that is another site called Colorable.
I'll just input the colors there and it'll tell me if they are compliant with those standards.
There are some sigma plugins as well that are really, really helpful if you don't want to use a browser
and I'll show you those later.
Now, there are alternate ways to improve contrasts and sometimes it can be a really large task to check
each of your foreground and background color combinations.
An easy way to run through a test to find any issues with your designs is to use a chrome tool called
Color Contrast Analyzer.
So this is another tool that I use.
There are multiple types of chrome extensions out there, but I like this one best because what it does
is it essentially identifies areas that will require work on the screen.
Areas outlined in white maintain good contrast in areas with poor contrast, have subtle outlines that
aren't as prominent.
So this is a good way to get a good understanding if your current design is accessible at all.
The next thing we can do is proper labeling.
I know it sounds kind of boring and rudimentary, but labeling can go a long way, especially with screen
readers as they're jumping around the screen.
Your developers probably know a lot about this already, but the designers don't adhere to proper labeling
and it's an easy thing that we can all do to make things a bit more accessible.
And what I mean by that is that when you're designing a form, rather than having a placeholder inside
the input and which possibly acts as the inputs label, just have your label be a label.
You could have a placeholder that then unfocussed acts as a label.
But a placeholder that goes away upon focus is a huge no no, not only for user experience, but for
accessibility.
So labels on top like this and as a separate element are a really great way to go and achieve that.
And then there's also menu labels.
So think about like a hamburger menu.
A lot of people use hamburger menus for hiding menus on mobile, which makes a lot of sense.
If you're going to use a menu icon, then you should have some other indicator because the icon alone
isn't necessarily accessible unless it's being properly coded and things like icons, even though you
can put a title in the code to help screen readers actually read them, it's a better practice to put
a label beside an icon or any sort of menu.
Icon knows jump into Sigma to talk a little bit about the tools I use.