Transcript
Hi, and welcome back. Here, we’re going to show how to take a look at your website colors for accessibility. First, we are going to take a look at your existing colors and check to see if they are or are not accessible. Then we’re going to cover how to actually build out a color palette to make it accessible.
Using the Quick Colors Tool
The first tool we’re going to use is on the Easy A11y guide website from the primary navigation menu, go to ‘DIY Tools’ and then ‘Quick Colors’. Here all we do is we go down to the background and foreground sections. Here we’re just going to enter our first background color. This website has several background colors, so we’re going to enter three of them. If you only have one background, you can just enter the same color for all three inputs.
These are easy to copy and paste your normal hex codes. I’ll go ahead and fill in the rest later. Then we’re going to select our heading color from our website. If you haven’t ever selected a heading color or tried to find colors on a website, you can hit Command, Shift and C on your keyboard and it will bring up an informational menu in the Chrome or Chrome based browsers and let you know what your different colors are.
Here I can see that this particular color is black, zero, zero, zero, zero, zero, zero, 16 pixel, Verdana, and it’ll even tell me the contrast value if it can compute it. So I will now edit my heading, text, link and link hovers that I have on the website.
Next is border colors. Not everyone always has an existing border color on their website. If you don’t have anything, just leave this as the default, which is all sevens.
Then you’ll have accent colors. These are frequently used for icons or other things that are not specifically text. You may or may not have accent colors. Then you’ll put in your button background color and here you’ll put in what the background color is, what the text color is and then if it’s got differences for hover. And you’ll put all of that in and then click on the button.
So I’m going to quickly fill those in. I’ve now put my colors in and you’ll notice that in a couple of spots I just duplicated the color because I didn’t have any more. Now I just click my ‘Update Grid and CSS Variables’ and now down here we will see the updated grid, which will show what’s going on.
What we’re looking for is the left column or the first column and this is labeled ‘Color Name’. Our goal is to have the word ‘OK’ appear on a regular basis down this column. When we see the word issue, it means that we have, well, an issue. So let’s go through this grid.
Okay, heading color. Here it’s going to tell me about the different heading colors. So it’s going to tell me that we did great and we even passed the triple A level for WCAG. Here, against the darkest of the backgrounds, we did good. We passed the double A level.
And we can continue down looking at the different elements. So here we can see that the text color works on two of the backgrounds, but here on the third background, it would only work for icons or large text. It doesn’t have enough contrast for regular text.
You’ll see that the link color displays an issue cross the board. Link colors should pass double A. Here you’ll see the link cover color is the same as the link color.
You’ll see that the border color is definitely too low. And as we go through, you can see there’s just a lot of issues. And so now we’re going to correct them. You can correct things yourself from within this tool.
For example, for the button, let’s look at the button hover color. I’m going to click on the button hover color and right now we can see that we have this aqua color. Now generally when I correct colors, I want to first make them darker. So here I’m going to take this, it’s a very light color and we’re trying to get it to contrast with white.
So I’m going to bring it down here and this is going to make it quite a bit darker, but we’ve kept the hue. So it should match a lot of our existing content, just be darker. And see, by darkening it up, which is just going straight down, it adjusted and gave me a good result.
I also could have fixed this by keeping that color and by just making the text color dark. For example, the existing heading color within the website is a pretty dark color. And here now I have passed for the button hover state by just keeping the aqua background and using one of the darker colors for the text.
Using the Full Color and Font Builder Tool
But let’s say we want to update all of these, not just a couple items, then we can go to the ‘Full Color and Font Builder’. This tool is going to take your inputs and generate outputs. That means it’s going to modify what you give it because the goal is to create accessible results. And to do that, it has to make modifications.
This tool asks for a few more pieces of information. We’re going to grab the font, the font sizing, and the corner style. Then we’re going to grab the light text and the dark text. And finally, we will grab the brand colors.
This is a much simpler set of inputs than the previous tool. So I’m going to go grab those quickly. Now I’ve put in the colors. I put in a primary font of Poppins.
There wasn’t an exact match for this website. So again, I went to the DIY menu and I checked font examples and I found a similar font. I picked font size standard. The website uses pretty typical fonts.
They didn’t seem really big to me, and they use a rounded corner for their borders. I then put in their light text color. And this is where on the website they had dark backgrounds like a dark charcoal gray and they had white text on it. And then where they had light backgrounds, they had this nice dark text color.
Then I pulled out their two brand colors. And now I’m just going to click on ‘Build Styles’. This is going to actually create the styles. It takes what I inputted and modifies it to create acceptable results.
So now we’re going to come down to the sample section. And here in the sample section, we can see we have a few different colors of backgrounds. They’re softened down a bit from the brand colors. And we can see that we’ve changed what colors are being used for the actual button text.
Here we can see a grid of the colors that got created. We all see that now we are changing the links to have this new color and underlined. You can see the buttons against a dark background, you can see just a number of different things for how the new color palette looks. Now we come down to the contrast grid.
You can also navigate around on the ‘Full color and Font Builder’ through this top little hover section. And now I can see here with this new set up, I have ‘OK’ all the way down the color name column. This is great. It means that we’re now passing for these different options.
Let’s say I still liked to have that blue on the hover for buttons. Well, we can modify the contrast grid by going down to ‘Full Inputs’. Under ‘Full Inputs’, I can make changes. So here I’m going to take the button background that happens on the hover.
Oh, I’ve got the wrong color. Here we go. So I’ve changed the button background. I can make the background and the border for hovering the same, and I can use this nice dark text color that’s been generated against the button.
Now that I’ve made those changes, I can click ‘Update Sample and CSS Variables’. That will update them.
And now I can go back to the contrast grid. Here I’m now seeing that nice blue aqua color with the nice dark label on it. So it’s very easy to read and passes.
Again, we can make a few more tweaks. We can also come up to the sample and we can see how the tweaks look. And then when we’re happy with everything, we can come down to the CSS variable section and we can copy off all of this information that has been generated.
Just copy and paste to wherever you’d like to save it. And that covers how to check and how to convert your colors into accessible colors.