>>Jena Fahlbush: Let's take a look at color contrast in our similes and
metaphors Canvas assignment. So, in the editor I see the
instructions, table, and activity choices that we've been reviewing.
I noticed that Canvas defaults to black on white
black text on a white background, which I appreciate and is very common among
document editors, because this provides quality contrast
for most individuals. I really recommend sticking to
a black on white contrast when possible unless you
have a student that requires different sets of colors for
contrast or visual needs. I do notice, however,
that when I scroll down as I've added hyperlinks to my content,
Canvas defaults the hyperlink color to a lighter blue.
So, I manually inserted a hyperlink to a Jamboard with the text this Jamboard.
Additionally, I added an email address, a fictional email address, that Canvas automatically
formatted into a hyperlink, so that a student can quickly
email this address. In each case, this light blue does not appear
to have solid contrast in my opinion. So, to check that, I have a couple
tools on my side. I want to first show you the
WebAIM Link Contrast Checker website. This is a free tool that you could access
by Googling the WebAIM Contrast- Link Contrast Checker.
You'll notice as I scroll that you can then insert hex codes
for the link for the body text color and for the background
color. In our situation the body text is black as defaulted on the website and our
background color is defaulted to white as the website
shows as well, so we can leave those alone.
What I do need to change is the hex color for our links.
I do need to go grab or find the hex code for this color that
Canvas is assigning to my hyperlinks to be the most accurate using this checker.
I will point out that if I click on the color box below the text
box, I could guess as to the color I'm using or Canvas has assigned,
but to be more accurate, I'm going to find a hex code for the color.
Back into my assignment. So, to do this and find the hex
code color. One tool I'm going to use is the free Eye Dropper extension that I added
to my Chrome browser.
And, I'll click on this Eye Dropper with a color sample to create this pop-up window.
Now, I can choose pick color from webpage in this extension.
This allows me to use crosshairs with a sample of
the color that the crosshairs are hovering above in the
lower right-hand corner to choose t he color that I want to grab the
hex code for. So, I'm hovering over the light
blue text. I see using the sample in the bottom right that the blue looks correct.
Now I click, go back to the extension in the browser,
and in the upper right I'm presented with a hex code
color. So I'm going to highlight that hex code color with my mouse, right click,
and select copy. I want to bring that copied hex code into
the WebAIM website deleting out what was there previously.
Now, I can right click and choose paste. Once it's pasted in, I click enter on my keyboard
to check the contrast with this tool. You'll notice that there are three areas it's
checking. This color passes in two, but it does fail
in the link to background check.
To remedy this problem, I want to go back into my
assignment and choose something that has better contrast.
To do so, I will highlight this Jamboard, which is the hyperlink light blue,
go up into the top line of my toolbar toward the left hand
side to the text color, select the dropdown, and I like to choose
a brighter blue. Now that my hyperlink has been adjusted to
this new blue, I want to go through the same
steps that I just accomplished for checking the previous color
with the new color. So I click on the Eye Dropper extension in
my browser bar, pick color from web page.
Now I want to hover over the new blue, making sure my sample looks correct.
Click when I feel that it's accurate,
open the extension one more time so that I can highlight,
right click, and copy this new hex code. Back into the WebAIM tab.
Let's delete the previous link color we checked by
highlighting and clicking delete. Now I right click in the box, paste,
and hit enter. Now I can see that my new bright blue passes
in all three areas in WebAIM's Link Color Contrast Checker,
so I feel good about that. Before we jump back into our assignment, I do want to point
out that below our alerts that we've passed all these contrast checks, there's an explanation.
In this second paragraph it reads, "In addition, both links and body text must have at least
4.5:1 contrast with the background (3:1) for large text to meet WCAG 2 Level AA. I point
this out, because in a previous demonstration about font size, this explanation does explain
why making font larger improves the contrast. So, when we have large text, which is 14-pt
and bold or larger with or without the bold, the contrast ratio is only 3:1. But, when
we have smaller text, that's 14 and not bold or smaller, then we must ensure that the contrast
ratio is 4.5:1. That means again, that when we increase our font size our contrast doesn't
have to be as high as it would for smaller text.
Going back into my assignment, I want to know make sure that all of my hyperlinks
get edited to the new color.
I have just one more hyperlink, which is the email address. So, I will highlight
the email address, go back into the text color box,
and choose the same blue. Now with our links adjusted and are solid
black on white font on a background contrast,
this assignment has been set up to be more universally
accessible for our students and other users.