Transcript of video:
(00:01) Introduction to Color Contrast
One of the web content accessibility guidelines has to do with color contrast and specifically a high enough ratio between a foreground and a background color. The human eye likes a certain amount of contrast. I'm sure we've all been there where we're trying to read something that's a very faint text on a light background or a very dark text on a dark background as well and it's hard to read.
(00:25) Understanding Hex Codes
And so how do we know what our colors are? They are determined by what's called a hex code. Every single color has a unique hex code. And it's basically a code that contains digits and letters and determines the color.
(00:48) RGB Values and Color Examples
But it really has to do with the amount of red, green, and blue light that is in a color. And so, um, if it's black, it's all zeros cuz there's none of those. And if it's white, it's all Fs because it's all of those in the highest intensity possible. So this blue color background is a nice pretty color of blue, but it definitely looks different with a black text or a white text.
(01:05) Contrast Ratio Requirements
And if I were to put those colors into a color contrast checker, I need that color contrast ratio to be 4.5:1 for normal text, which is like about 14 point or lower, and then 3:1 for larger text.
(01:29) Example Ratios
In this example, the black text has a ratio of 5.58:1 on that blue background, while the white has 3.75 to1. So, the white would not pass that that check.
(01:52) Finding Hex Codes in Google Tools
So, how do I find the hex code if I'm using Google Slides or Google Docs? When I'm going to change the color of either text or a object, I'll have like a color fill or the text color buttons. And so, from there, I can go into the custom part of that and find the code.
(02:34) Copying Codes Into Checkers
And so if I'm actually going to want to change the color of my text, I go and I pick this button instead. So the difference between the bucket, which is the fill color, and then the text color. But both of them have the custom option.
(02:54) Using a Color Contrast Checker
If I am in here and I want my foreground to be all black. So that I can slide this around, by the way.
(03:18) Pass/Fail Examples
And you can see that my black on my on that color of blue that I had chosen on that one slide passes. It's 5.58 to one.
it doesn't pass. So, for example, if I have the white color, which is all the Fs, that doesn't pass.
(03:44) Using Adobe Color Tools
The other one I use a lot is the Adobe color an color contrast analyzer and it actually can give you some suggestions if it's failing.
(04:04) Finding Hex Codes from Images
But there is kind of a cool thing in Google Slide that you can do and and you can pick from an image.
(05:05) Using the Eyedropper Tool
And so, I'm going to just highlight this text. It's black right now, but if I go and say I want to change the text color, I could pick any of these. I could go custom. I could drag out all kinds of different colors. I could paste in a hex code. I'm going to go ahead and pick this eyedropper tool.
(06:17) Using Browser Extensions for Color Picking
What about if I want to get a color from a picture from a website that's not a Google slide? I can do that if I have an extension in my Chrome. The one I'm using right here, it looks like an eyedropper as well.
(07:24) Chrome Extensions for Color Tools
If I want to get the a color pick picker extension, I need to go to the web store.
(08:01) Additional Resources and Office Hours
But if you need help, just let us know. And then there's always more resources on our website. It's a11y.esu10.org. And we also have office hours. Check with Jason every Monday from 8 to 9:00.