Tom: Hi, I'm Tom Jewett.
This video is designed to help web developers
refine the use of color in their work.
You already know that what we call color
is actually produced by different wavelengths of light,
like a rainbow.
White is simply a combination of the visible wavelengths
and black is the absence of light.
Probably less well known is the fact that our eyes
don't respond equally well to all of these wavelengths.
With normal vision, we are most sensitive
to colors somewhere between yellow and green,
shown by the white circle in this diagram.
Toward the shorter, blue wave lengths, our sensitivity
falls off rapidly.
In the other direction, it falls off a bit slower,
but is still much lower in red than in the middle.
Worse, about 10 million people in the U.S. alone,
mostly men, have some form of color blindness.
One example is shown here.
We'll talk more about how to accommodate this condition
a bit later on.
There are two ways to specify colors in style sheets.
The lesser known, but sometimes more useful one,
is called HSL.
Hue describes the color itself in degrees:
it's a bit like the spectrum, only pasted into a circle.
Saturation, in percent, describes how much of
the color there is, compared to gray.
At 0%, hue is irrelevant.
Above 50% light, colors become, duhh, lighter;
below 50%, they become darker.
At either end, white or black, both hue
and saturation are irrelevant.
Since computer displays have red, green,
and blue light emitters for each pixel,
RGB is the most familiar model of color on the web.
The full value of all three, 255 decimal or FF hex,
is seen as white;
reducing them together goes from gray to black.
Colors are a mixture: once we bring red to its full value,
we can add green to go through orange to yellow.
Now take away red, and we're moving around the hue circle
to green alone.
Add blue, and we've got cyan;
take away green to get blue;
add red for magenta.
How do we make it lighter?
Simply add a bit of the third color.
Let's look at both models together.
Raising red, as we did in the RGB demo,
keeps hue at zero while jumping saturation to 100%
and gradually raising light to 50%.
Move the hue control through its now-linearized circle,
and watch the RGB sliders jump up
and down as the color changes.
De-saturate to 50% and move hue again, R, G, and B
still cycle, but only within half their range.
Finally, de-saturate entirely to gray-scale,
R, G, and B are now equal in the middle.
Now that we are looking at both text and background colors,
we need to understand the contrast between them.
This is a ratio that ranges from 1:1 when they are the same,
to 21:1 for white on black, or black on white.
Contrast is computed from the RGB values,
taking color sensitivity into account;
our numbers are color-coded to reflect
the Web Content Accessibility Guidelines.
The gray-scale examples, set to the values shown,
should be a good motivation to use the higher values,
even if you think there's a color difference.
Your eyes can fool you.
If you're fully sighted and not color blind,
you can tell the difference here;
but at only 2:1, many other people can't.
Darken the text to 65%, and we're okay for large text;
55% is even better.
Hue makes a difference, too, especially for color blindness.
Watch the contrast change as we move through the spectrum.
If you don't specify colors, browsers will default
to black text on a white page.
For most readers, though, blocks of text
will produce less eye strain if you slightly darken
the background with a color that's compatible
with the rest of your page.
Some readers may need lower contrast.
This example was provided by a low-vision colleague,
who enlarges texts up to 400%.
In reverse, he'd probably want
a slightly darker background.
In any event, the page author must always allow for
text wrapping and personalized styles in the browser.
Finally, you may have to use the exact colors
that already represent the business
or organization that you're working for.
This example is taken from the banner
of a university web site;
they use the same colors, in reverse,
for a few headings, which is still okay for large text.
Their text blocks use a light-yellow background,
with dark red headings and black for the body.
Although we've focused on text contrast,
you can use the same techniques to design accessible logos,
graphics, and other page elements.
You can find this video, along with the full color tutorial,
at colortutorial.design.
Thanks for watching.