Everyone, welcome back.
We're going to be talking about some of the tools that I use to check color contrast and make my designs
a bit more accessible.
Then we'll jump quickly into Fatema to debunk some things around our contrast ratios being a rule rather
than a guideline.
So let's take a look at color safe over here.
So this is color safe.
Allow me to pick color palettes based off of my goals and let's just jump in and get started.
I'll show you what that means so I could get started.
And right here we can set up our canvas and our text so I can set up background colors.
I can set up for families all the font size font weights.
I can even set up standards.
You can go and learn more at the website over here.
But typically we're aiming for double standards and this is what the textbook look like.
I think this is fine to just get started.
So I'm going to do is I'm going to click generate color palette.
So what this does is it generates a ton of color palettes based off of different colours like green,
blue, purple, you can also sort by all and you'll be able to see all of the contrast, applicable
colors.
So what I can do here is I can pick this purple and you'll notice that the current ratio meets the standard.
I get a little hex value here that all you do is click on and I copy's to my clipboard and I can bring
that right into Frogmore and start creating a color palette based off of some colors that I've picked,
which is really cool.
You can see that this one's been copied.
You can see all these other ones over here, which is really great.
And you can just start over if you want to, if you want to go back and set up that canvas again.
Now, the next tool I like to use is called colorable.
Now, I just love this interface.
It's just nice.
It's punchy.
And what's really nice and cool about it is that you can see if it's a complaint or a complaint right
at the top.
You don't necessarily need to set anything.
You can just jump right in and start fiddling away if you have a couple of colors that you already have
in mind.
It's a great way to just kind of input them right away.
Another thing is like if you really want to just fiddle around with colors, this is probably the best
tool to do so.
So you can see like white on this very, very light sky blue fails in all aspects.
And you'll see that it still keeps on failing, probably until we get a little darker, so you can see
this is good for larger text and.
Smaller text, and now it's triple-A compliant.
So this is another really cool tool where you can also do as you can reverse these.
And you can see what it looks like reversed when you reversed the foreground and the background colors.
So this is an awesome tool.
If you want to fiddle around with colors really quickly or test a color or hex code that you have in
mind.
Now, what I typically use our sigma plug ins because it's just so quick for your actual workflow,
the main figure plug in that I actually use is called.
Contrast, so I'll bring that up right now, so I have a couple of buttons here and I'm going to show
you how that works with contrast.
But what I really want to show you is that these buttons are actually accessible and they they are readable.
And but I think that they're not the greatest.
So I'll show you what that looks like.
So all I need to do is I need to select this text inside this frame and it'll show me exactly here if
it meets the contrast standards.
You'll see the foreground and background and it meets all the standards right across the board.
Let's see, even with the orange, same thing.
We'll show you the contrast ratio here as well.
And I find this is like the quickest way to just test your designs even when you're just creating concepts.
So I'm going to do here is I'm going to actually create a double a duplicate over here and I'm going
to show you what it looks like with white.
So I'm going to change that.
And another great thing about this is that it's going to update on the fly.
So let's go and pick white.
The color X code for that is F, F for a short form or three or six FS.
Now, what we got here is that it totally fails, the contrast ratio is not good enough and I think
it's going to fail as well for the orange.
Let's change that, and yet it does fail here for the orange.
The contrast is just a bit better than it is on the blue.
Actually, oh yeah.
It's just a bit better.
Just a tad.
So let's just close this plug in.
And if you notice, I feel like I can read the white on the blue better than I can read the black on
the blue, and so this is going to come down to you testing with your users because those are guidelines
and you don't necessarily need to follow them like they're law.
So take that into account when you're designing and coming up with color palettes or intended uses for
your colors.
Because there may be a case like this where a white on a blue may actually be really readable and it
doesn't necessarily mean a contrast standard.
So keep that in mind, another plug in is stark, which is pretty, pretty popular, all you need to
do is like check contrast.
So I need select a layer sogginess like that layer and check the contrast really quickly so you can
see that it comes up right away.
You can upgrade and pay.
But I mean, I feel like.
This does it much better color where it contrasts, where this plug in is much better, just because
you can do it on the fly, you don't need to keep on selecting it or closing it or you don't even need
to pay for it.
So this is a great way to check what colors will work right on the fly.
So like I said over here, keep that in mind.
These are guidelines that aren't necessarily law.
So use what is best for you and what's best for your users.
And yeah, that's basically it for the tools that I use to check my contrast.