1
00:00:00,510 --> 00:00:01,960
Everyone, welcome back.

2
00:00:02,130 --> 00:00:06,750
We're going to be talking about some of the tools that I use to check color contrast and make my designs

3
00:00:06,750 --> 00:00:08,020
a bit more accessible.

4
00:00:08,520 --> 00:00:15,780
Then we'll jump quickly into Fatema to debunk some things around our contrast ratios being a rule rather

5
00:00:15,780 --> 00:00:16,570
than a guideline.

6
00:00:17,130 --> 00:00:19,570
So let's take a look at color safe over here.

7
00:00:19,890 --> 00:00:20,970
So this is color safe.

8
00:00:20,980 --> 00:00:26,270
Allow me to pick color palettes based off of my goals and let's just jump in and get started.

9
00:00:26,310 --> 00:00:29,340
I'll show you what that means so I could get started.

10
00:00:29,340 --> 00:00:34,590
And right here we can set up our canvas and our text so I can set up background colors.

11
00:00:34,590 --> 00:00:38,160
I can set up for families all the font size font weights.

12
00:00:38,610 --> 00:00:40,290
I can even set up standards.

13
00:00:40,620 --> 00:00:43,290
You can go and learn more at the website over here.

14
00:00:43,290 --> 00:00:48,790
But typically we're aiming for double standards and this is what the textbook look like.

15
00:00:48,840 --> 00:00:51,290
I think this is fine to just get started.

16
00:00:51,300 --> 00:00:53,430
So I'm going to do is I'm going to click generate color palette.

17
00:00:55,080 --> 00:01:00,840
So what this does is it generates a ton of color palettes based off of different colours like green,

18
00:01:00,840 --> 00:01:07,440
blue, purple, you can also sort by all and you'll be able to see all of the contrast, applicable

19
00:01:07,440 --> 00:01:07,960
colors.

20
00:01:08,310 --> 00:01:15,720
So what I can do here is I can pick this purple and you'll notice that the current ratio meets the standard.

21
00:01:16,170 --> 00:01:22,740
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

22
00:01:22,740 --> 00:01:27,570
that right into Frogmore and start creating a color palette based off of some colors that I've picked,

23
00:01:27,990 --> 00:01:29,030
which is really cool.

24
00:01:29,940 --> 00:01:31,680
You can see that this one's been copied.

25
00:01:32,950 --> 00:01:37,180
You can see all these other ones over here, which is really great.

26
00:01:39,010 --> 00:01:43,280
And you can just start over if you want to, if you want to go back and set up that canvas again.

27
00:01:43,960 --> 00:01:46,790
Now, the next tool I like to use is called colorable.

28
00:01:47,440 --> 00:01:49,180
Now, I just love this interface.

29
00:01:49,550 --> 00:01:50,260
It's just nice.

30
00:01:50,260 --> 00:01:51,040
It's punchy.

31
00:01:51,340 --> 00:01:57,550
And what's really nice and cool about it is that you can see if it's a complaint or a complaint right

32
00:01:57,550 --> 00:01:58,030
at the top.

33
00:01:58,030 --> 00:01:59,740
You don't necessarily need to set anything.

34
00:01:59,740 --> 00:02:05,980
You can just jump right in and start fiddling away if you have a couple of colors that you already have

35
00:02:05,980 --> 00:02:06,610
in mind.

36
00:02:06,790 --> 00:02:09,370
It's a great way to just kind of input them right away.

37
00:02:09,760 --> 00:02:15,520
Another thing is like if you really want to just fiddle around with colors, this is probably the best

38
00:02:15,520 --> 00:02:16,460
tool to do so.

39
00:02:16,930 --> 00:02:22,390
So you can see like white on this very, very light sky blue fails in all aspects.

40
00:02:25,750 --> 00:02:31,480
And you'll see that it still keeps on failing, probably until we get a little darker, so you can see

41
00:02:32,020 --> 00:02:34,420
this is good for larger text and.

42
00:02:36,240 --> 00:02:38,700
Smaller text, and now it's triple-A compliant.

43
00:02:39,240 --> 00:02:45,270
So this is another really cool tool where you can also do as you can reverse these.

44
00:02:46,620 --> 00:02:51,290
And you can see what it looks like reversed when you reversed the foreground and the background colors.

45
00:02:51,600 --> 00:02:52,800
So this is an awesome tool.

46
00:02:52,800 --> 00:02:57,510
If you want to fiddle around with colors really quickly or test a color or hex code that you have in

47
00:02:57,510 --> 00:02:57,830
mind.

48
00:02:59,040 --> 00:03:05,540
Now, what I typically use our sigma plug ins because it's just so quick for your actual workflow,

49
00:03:06,000 --> 00:03:10,290
the main figure plug in that I actually use is called.

50
00:03:11,340 --> 00:03:17,340
Contrast, so I'll bring that up right now, so I have a couple of buttons here and I'm going to show

51
00:03:17,340 --> 00:03:18,920
you how that works with contrast.

52
00:03:18,930 --> 00:03:25,650
But what I really want to show you is that these buttons are actually accessible and they they are readable.

53
00:03:26,040 --> 00:03:30,330
And but I think that they're not the greatest.

54
00:03:30,330 --> 00:03:31,850
So I'll show you what that looks like.

55
00:03:32,010 --> 00:03:39,090
So all I need to do is I need to select this text inside this frame and it'll show me exactly here if

56
00:03:39,090 --> 00:03:40,980
it meets the contrast standards.

57
00:03:42,280 --> 00:03:47,840
You'll see the foreground and background and it meets all the standards right across the board.

58
00:03:48,130 --> 00:03:50,750
Let's see, even with the orange, same thing.

59
00:03:50,770 --> 00:03:53,140
We'll show you the contrast ratio here as well.

60
00:03:53,380 --> 00:03:58,420
And I find this is like the quickest way to just test your designs even when you're just creating concepts.

61
00:03:59,230 --> 00:04:05,650
So I'm going to do here is I'm going to actually create a double a duplicate over here and I'm going

62
00:04:05,650 --> 00:04:07,620
to show you what it looks like with white.

63
00:04:08,170 --> 00:04:09,220
So I'm going to change that.

64
00:04:09,230 --> 00:04:13,890
And another great thing about this is that it's going to update on the fly.

65
00:04:14,200 --> 00:04:15,790
So let's go and pick white.

66
00:04:16,030 --> 00:04:22,360
The color X code for that is F, F for a short form or three or six FS.

67
00:04:23,550 --> 00:04:30,750
Now, what we got here is that it totally fails, the contrast ratio is not good enough and I think

68
00:04:30,750 --> 00:04:33,090
it's going to fail as well for the orange.

69
00:04:34,020 --> 00:04:39,100
Let's change that, and yet it does fail here for the orange.

70
00:04:39,120 --> 00:04:42,300
The contrast is just a bit better than it is on the blue.

71
00:04:42,670 --> 00:04:44,190
Actually, oh yeah.

72
00:04:44,220 --> 00:04:45,510
It's just a bit better.

73
00:04:45,570 --> 00:04:46,190
Just a tad.

74
00:04:46,530 --> 00:04:48,600
So let's just close this plug in.

75
00:04:50,000 --> 00:04:56,720
And if you notice, I feel like I can read the white on the blue better than I can read the black on

76
00:04:56,720 --> 00:05:02,750
the blue, and so this is going to come down to you testing with your users because those are guidelines

77
00:05:02,930 --> 00:05:06,550
and you don't necessarily need to follow them like they're law.

78
00:05:07,010 --> 00:05:13,580
So take that into account when you're designing and coming up with color palettes or intended uses for

79
00:05:13,580 --> 00:05:14,210
your colors.

80
00:05:14,630 --> 00:05:21,530
Because there may be a case like this where a white on a blue may actually be really readable and it

81
00:05:21,530 --> 00:05:23,690
doesn't necessarily mean a contrast standard.

82
00:05:24,660 --> 00:05:32,340
So keep that in mind, another plug in is stark, which is pretty, pretty popular, all you need to

83
00:05:32,340 --> 00:05:33,870
do is like check contrast.

84
00:05:34,050 --> 00:05:40,560
So I need select a layer sogginess like that layer and check the contrast really quickly so you can

85
00:05:40,560 --> 00:05:42,810
see that it comes up right away.

86
00:05:42,840 --> 00:05:44,160
You can upgrade and pay.

87
00:05:44,520 --> 00:05:46,260
But I mean, I feel like.

88
00:05:47,260 --> 00:05:54,490
This does it much better color where it contrasts, where this plug in is much better, just because

89
00:05:54,490 --> 00:05:59,260
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

90
00:05:59,260 --> 00:06:00,050
to pay for it.

91
00:06:00,070 --> 00:06:06,710
So this is a great way to check what colors will work right on the fly.

92
00:06:07,030 --> 00:06:09,880
So like I said over here, keep that in mind.

93
00:06:10,720 --> 00:06:13,480
These are guidelines that aren't necessarily law.

94
00:06:13,480 --> 00:06:17,260
So use what is best for you and what's best for your users.

95
00:06:17,830 --> 00:06:23,530
And yeah, that's basically it for the tools that I use to check my contrast.