In this next section we're going to talk about issues related to color and web page 
accessibility. To make a web page accessible, we need to make sure that we use color words 
correctly and that we have good color contrast. Let's talk about color words first. When I say 
color words, what I mean are words that describe a specific color like red, orange, yellow, 
purple, green, etcetera. What's important here is that we don't want to depend on those color 
words to provide information because people that have difficulty perceiving color, may 
not be able to fully understand or complete tasks that you're requesting that they complete. 
For example, if in your web page you have instructions that say, "Items marked in red must be 
completed," you can imagine how a person that is visually impaired whether they are blind 
or color blind may not be able to complete that task. Likewise, if you have a green button on 
your webpage and you are asking people to push the green button to start. That may be difficult 
to complete. What we want to do instead is to take the color word out of the equation and to 
replace it with something that is purely a text based element. So instead of saying, "Items 
marked in red must be completed," change the word red to a text character like a star 
and create the instructions that read, "Items marked with a star must be completed." Alternately, 
instead of using an individual text character, you could use a word that better describes an 
action or a section. So instead of the green button, title the button "Start" and then change 
your instructions to read, "Push the button titled 'Start' to begin." So let's evaluate our 
web page for color words. The easiest way to evaluate a web site to find color words is to 
visually scan your web page to see where text changes color. So whenever your text changes from 
one color to the other, look around that area for a color word. So, in the case of the 
Mouse College page, the text color changes between the color and the Mouse College logo and 
the words Mouse College Soccer Program. But notice I don't spot any color words here. Likewise, 
the text color changes between Mouse College Soccer Program and our list of links. But again, I 
don't spot any color words here. So continue scanning through your page and you'll eventually 
come across some color changes that pose a possible problem. Here we have text that reads, 
"Away games are listed in green." Well here's a color word that's not used in an 
appropriate way. Again, if a person was not able to perceive the color green, how would they 
know which games are away games? So what we want to do here is to eliminate the color word and 
replace it with some kind of text based identifier. I'm going to change "listed in green" to 
"listed with an asterisk" or a star. So I'm going to go ahead then and add that star to the 2 
rows that are associated with the away games. Now notice that regardless of whether you could 
perceive the color green, you would be able to understand which games are away games. If I 
scroll down further through my document you'll see that in our sign up on our mailing list 
section we have a set of instructions that says, "All fields colored in red must be 
completed." Again this would be a color word issue. So what can we do here? Well certainly we 
could add a star to each of these 2 fields and change the instructions to "All fields 
marked with a star must be completed." But it might be simpler just to eliminate the 
instructions that are color based altogether because we only have 2 fields and all fields 
must be completed because both fields are marked in red. So a much simpler set of instructions 
and again eliminating the issue of color words. Let's talk about color contrast. Our second issue 
has to do with insuring that the contrast of the text in our web page and that our background 
colors have sufficient contrast. To eliminate guess work, we recommend the use of the color 
contrast analyzer tool. This is a free tool that is desktop based. It's available for both 
Windows and Mac and it enables you to check the color contrast of any text that you can see on 
your screen against the background color of that text. So, to run the color contrast 
analyzer, go to your Start menu, go to All Programs and choose Color Contrast Analyzer. The 
Color Contrast Analyzer will appear as a separate window that you want to position in front of 
your Dreamweaver window so that you can see the Color Contrast Analyzer window in front of the 
Dreamweaver window. So make sure the algorithm section is set to luminosity. If it's not, be sure 
and click the radio button that sets the luminosity setting. Now use the eye dropper in the 
foreground color section by clicking on it. When you click on the eye dropper, notice that 
your eye dropper changes into a large magnifying glass with a small cross hair in the middle. 
This enables you to position this magnifying glass over text in your Dreamweaver window to 
select a certain color. Notice that when I put the cross hair in the middle over the color of 
the S in soccer that, that color is being highlighted in the foreground: color select swatch. 
So once I position my cross hair over a color, I click once with my mouse. And notice in the 
Color Contrast Analyzer that color is selected. I'm going to repeat the process with the 
second eye dropper for background color. And in this case I'm going to select the 
background color next to that letter in my page and click once with my mouse. At the bottom of 
the Color Contrast Analyzer window, this will show that this color combination of light blue 
against light yellow fails both the WCAG, double A and triple A checks. We recommend that any 
color combination that you use pass all 4 checks. So, to adjust the color in your web page, 
we're going to take several steps. First of all, we're going to adjust the overall text color 
of our web page. Go to the Modify menu in Dreamweaver and choose Page Properties. Next, 
click on the color swatch next to text color and select a darker color such as black or 
dark gray. Click the OK button, and now notice that most of the text color in your Dreamweaver 
document has changed to black. We once again want to use the Color Contrast Analyzer to check 
the black text color against the yellow background color. So again, I'll click on the 
foreground color eye dropper, position that over my black text and click once with my mouse and 
the background color is already selected with the background color eye dropper so I don't 
need to selected it again. But notice the Color Contrast Analyzer says that the black 
text on the yellow background passes all 4 of the WCAG luminosity checks. So this color 
combination is fine. So we want to repeat this process a few times for the remaining text 
colors that we see in our document. So again, foreground color, eye dropper, sample the 
foreground color against the background color, make sure that it passes all 4 checks. Now in 
this second section, I encountered some light green text which again fails. Another 
way to fix color in Dreamweaver would be simply to highlight the text that has the incorrect 
color, click on the text color swatch on the Properties Inspector and choose a color 
that is more appropriate. Dark colors on light backgrounds are better and in keeping with the 
theme of the page, I'm just going to choose a darker green color. Now that I've changed 
that color, I will recheck it with my Color Contrast Analyzer against the yellow background. 
And in this case that combination passes. So I'm going to select the remaining cells 
that I have in my table and choose that same color. The red at the bottom of my page also 
fails the check so I will repeat that process again highlighting the text, clicking the text 
color swatch on the Properties Inspector and choosing a more appropriate color. Again simply 
in this case a darker red should be sufficient to address the contrast issue and I will again 
recheck the new color to make sure that it passes.