Okay, well thanks everyone for joining. This is the – I'm going to be talking about color tools. So, things to help us choose colors, identify colors, and test colors for contrast because color contrast is really important for accessibility. For people who have low vision or who are color blind that kind of thing and also for anyone anyone really I've you know how many of us have been through presentations where we see a slide and it's like I can't read the text because the color contrast is not good.

The first tool I want to show you is this: it's a browser extension available for Chrome and Firefox called ColorZilla. Here is the extensions icon right here ColorZilla. If I click it or if I select it, you'll see that it has all of these features here and the the ones that I use the most are pick color from page. If I select that you can see where the crosshairs are and then there's the magnification circle right next to it. If I just go over and put the crosshairs on something it'll give me that magnified view and I can just pick out whatever color I need to identify.

So I'm going to go over to this one Berkeley this background fill here I I don't know what color that is. Let me select that click where that crosshairs is and you'll see up here oh go back up here up at the top for a brief moment there was a little tool sort of like an info bar. So let me go back over to that fill color the color has automatically been copied to my clipboard. I'll just just to show you I'll just paste it in here to the search site. It'll give you the hex code right there.

The other thing that is cool in this ColorZilla panel here: you can pick colors outside your browser if you have something on your desktop or a different document open you select that and it'll give you the same sort of sampling ability. The Color Picker panel if you open that up it takes that color you just sampled and gives you the whole like panel if you wanted to sort of modify it choose something a little different.

And oh sorry in the Color Picker panel also the nice thing is that it gives you the history of all the colors you've sampled so prior to my One Berkeley you know background fill I must have sampled some other color I think maybe sunset or something here. So it'll just build this color history of all the colors you've sampled and you can always select it to sort of play with it in here. If you want to clear this history that's what this little red X box does.

This is also a really cool feature: the web page color analyzer.
It basically looks at the entire page and picks out the colors that are used in the CSS styles so you can you know choose any one of these if you find a page you're curious about. And there are a few other things here. I encourage you to download and explore these different features.

In the options for ColorZilla this is where you can actually customize its behavior. If you don't like seeing that magnifier circle you can disable that. Auto copy pick color to clipboard I think this is on by default. If it's not go ahead and check it and you can change what gets copied. I have it just set to the default that has the hash symbol in the front lowercase if you want lowercase. So this is a great one this colorzilla I use it all the time so I can choose or figure out what colors are being used in a web page.

Next I want to show of something I sort of learned after the last Canva session that I did. There was a question about the brand palettes and brand colors. So in Canva let me just go to the flyer example that I used. Close these things out. So here's you know you have your Canva document of any kind and if I select just the heading and I go over to the color to choose color for that text, it opens up the color panel over here. And right now I this is the free account.

So in the free account you can still see that there's a brand brand kit you can add your brand colors but what I discovered was that under the default free account you can only put three colors here. And then if you want to add more or add a whole palette you have to pay for one of their the higher levels. So you know if you don't have that ability to you know just pay for this subscription and you just want to stay on the free account, there's still a way to get all of your brand colors to make them available for for you to use in your documents.

What you can do is take advantage of canvas photo colors feature. So this little area of the color panel grabs the colors used in photos in your actual document so this photo over here of the plant canva has picked out sort of the main five colors from that photo. And if I wanted to I could make this heading let you know Green sort of matching the Green in that photo or brown or whatever you want. So I'm going to take advantage of this and I'm going to temporarily drag in a color file it's just a PNG graphic file it's a screenshot essentially that I made that uses the the four primary Berkeley brand colors and this is a secondary Berkeley brand color – current Berkeley brand color – so I'm just going to make that smaller but I'm going to pull it over here so it's sort of not in the way of my document.

And if you go to okay I don't want that let me go back to my heading and I want to pick the color so I'm just going to choose heading and the color thing. You'll see in this photo color area now it's added that little Berkeley brand sort of color file that I dragged in there temporarily but it's added them and you can now select any of these colors for any element on your document.

And let's say I select the Berkeley blue what you can do now this is selected it's highlighted if you add that or if you open up the brand kit area and add that color it'll basically make that one of the colors available under this palette. Let me add the gold and I guess I'll add the sort of neutral one. So notice we've done our three if you want more you have to pay. Once you're done editing you can just delete this image so it's not in your final product. But you've already it's done its job it's given you the colors. All right.

Speaking of brand colors, let's talk about them. Okay we're on ColorZilla pallet hack oh one thing about the Canva pallet hack. This little file that I create that I dragged over is available at the a11y engineering website resources page under color tools if you need, or you can just create your own little file if you want. But it's there if you want it. Okay brand color combos. So the current brand colors the main ones the primary ones are Berkeley Blue and California Gold and then I to round out the five I went with the Founders Rock, Medalist, which are – these four are considered sort of like the primary palette.

I think that's the naming that they use and then Bay Fog is actually sort of a secondary palette color and then since most text generally is black or white, I added a column for black or white here. And this is basically going through and checking the color contrast of the different combinations. And you'll notice that with brand palette it's really pretty bad. It's you know the little combinations I don't think considered accessibility when they created it. Or I'm not – you know I can't say for sure I was not here but with Berkeley Blue in particular you'll see that essentially for color contrast you can only if you're going to use Berkeley Blue as a background or text color, you can only use it with the California Gold, Bay Fog, or just plain white.

If you're going to use California gold you can you know do Berkeley Blue and black text. Like if you had a California gold background, you could have black text. Anything else, not going to work other than the Berkeley Blue. Also Founders Rock just don't use it. This pass had a little provisional thing because I think it fails either AAA, WCAG AAA or some something in there, so I didn't think that it was safe to use. Same with Medalist no good. Bay Fog again Berkeley Blue and black text is okay, but don't use it with white text.

So you can see it's not a great palette in terms of accessibility you have to be careful about what you're going to use. I know people like to use background fill to highlight content on sites. Oftentimes if you do that, you know your best bet is to just stick with the primary brand colors because all these other ones are not going to work. They will not pass muster here's the combinations. This is it. Hopefully with the new palette we'll you'll have much more many more options, but we'll see. We'll see.

Okay so now that we've done sort of this quick tour of that, let me go to the the actual contrast checkers. so WebAIM – web accessibility in mind – this is a great  website with resources, information and resources about accessibility, and one of the tools that I use all the time is their Contrast Checker. You can put in any value, any two values and it'll calculate the contrast ratio and it'll tell you here whether it passes WCAG specifications for normal text, large text, and graphical sort of components.

So let me go over to ColorZilla and just just to see how it works. And I'll go to the pick color history. Oh I just have one right now but that's it's okay. So this one should be in my copy to my clipboard. We'll see yeah okay. So there's that color with a compared to white on a white background, and you'll see that under normal text this is what it looks like here and it fails. So definitely don't want to use that one. Let's see let me use the Color Picker tool just for fun and I'll choose this green color over here and let's let's see what you know not that you would ever use this combo under normal circumstances, you'll see this is definitely a fail. So this is the contrast checker you can choose any two colors.

It doesn't matter in terms of calculating the ratio which one you say is foreground and background. It'll you know if you switch these it'll be the same. I'll show you. So it's 1.29 to 1. Let me switch them around okay 1.29 to 1, so it doesn't matter which where what you put where, the ratio is going to be the same. It'll just – the display here will be different.

The other contrast checker tool is the Link Contrast Checker. So if you have if you have hyperlinks on your web page and they are surrounded by text so you have links appearing within a paragraph, or  a headline, whatever, It needs to – and you're not using an underline – best practice for accessibility and usability is to make sure your hyperlinks are underlined, but a lot of people they don't like the way that looks, so they'll just you know use color to signify that something's a link. And if you do that within text, you have to make sure that that link color contrasts sufficiently with both the background color and the color of the text.

So here you can put in whatever link color you're using, what the regular text color is, and then the background color for the page and it'll calculate and tell you whether or not that color you're using for links passes muster. So that's another good thing to check.

There's on this page, this contrast checker page, if you scroll down a little bit it explains what those numbers mean and what they give you suggestions for usability and accessibility. So that is a good one to also note.

All of these are available or I have links to them on the a11y site. Let me just bring that up. Under Resources, Color Tools, you'll see here's a link to the Contrast Checker, the Link Contrast Checker, ColorZilla. This is the Berkeley brand color page, and then these two files here – I'll open this one. This one is just the brand colors with their hex codes all just all in one. And then back, this is that PNG with the color palette. Right click here and save image as to your computer.