Re: colors and backgrounds for web pages

  • From: "tribble" <lauraeaves@xxxxxxxxx>
  • To: <programmingblind@xxxxxxxxxxxxx>
  • Date: Mon, 29 Oct 2007 16:50:47 -0400

Actually it isn't only the brightness that is important when picking a 
background and foreground color -- the contrast is probably the most 
important, and relative brightness is only part of what makes a color 
contrast.  Yellow text on blue background is a good choice for high 
contrast, as yellow is brighter than blue on the computer screen, but also 
because the blue background lights up the blue pixels and the yellow text 
lights up the green and red pixels, so as far as light is concerned, yellow 
and blue are complementary.
If you want your page to be easy to read by low vision visitors, a dark 
background with light text is better, but for normally sighted persons, 
black on white or any dark color on white is also ok, as long as there is a 
What to avoid: things like purple on red or blue as purple lights up blue 
and red pixels and therefore does not produce much contrast.  Similarly cyan 
on green... you get the idea.
Finally, the content of your page might lend itself to display in colors 
with various emotional associations. For example, for whatever reason, 
purple is often used in pictures to convey a mood of fantasy or magic or 
dreaminess, but this is obviously subjective and even culturally dependent.
Being someone who has spent my life watching my vision slowly fade away and 
dealing with the frustration of not being able to see certain color 
combinations clearly due to lack of contrast, and also being someone who 
loves color and its associations, I would recommend that you select colors 
with care on your site, as color has a significant impact on the reader, 
even if he/she doesn't realize it at the time.
If you are totally blind and have never seen, it is hard to explain this 
type of mental association.  Recently I bought a "Color Test" color 
identifier from the American Printing House for the blind -- they have 2 
models, the expensive one being the color test. I got the expensive one as 
in my trials I found it more accurate. Also, the Color Test will optionally 
break down the color of an object into its primary components of red, green 
and blue.  Now I still have some color vision and can see most colors 
without using the Color Test,  but this has given me the ability to hear the 
actual breakdown of the colors I have always looked at visually -- and I can 
say that if I were totally blind and never had seen and used a color test, I 
wouldn't be able to make heads or tails out of the color breakdown.  There 
is a little of blue in even most of the brightest yellow, for example.  The 
thing to remember about color breakdown is that white has exactly 1 third 
each of red, blue and green, and if something is sky blue, it is like white 
mixed with a little extra blue, so the breakdown will contain seemingly a 
large amount of red and green, but the eye/brain does not perceive them.
Anyway, good luck and happy hacking.

----- Original Message ----- 
From: "John Greer" <jpgreer17@xxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Monday, October 29, 2007 3:09 PM
Subject: Re: colors and backgrounds for web pages

The first thing to ask is what kind of website are you trying to make.  What
kind of website you are trying to put out to the people needs to be a
determining factor because you wouldn't want a banking website to have a red
background with brite green text.  Why you might ask?  Because when people
are visiting a banking website a rule of advertising for them is they want
to come across as secure and stable.  So for that most of them will just use
the standard black text on a white background.  I am going to try to help by
associating a color with a mood and see if that helps.
red= A color that is for fun things, like a clown's red nose, a red ball.
blue = the color of the sky or ocean.  Think of how you feel when you visit
either but keep in mind that when in the water although sighted people can
see underwater it is a bit hard to see unless you have a mask.
green = an earthen color, the color of grass, trees etc.  Green text however
doesn't work unless you have a dark dark background color.  Also for mixed
colors like green, blue and yellow make green, it is always a good idea not
to use either color that make up a certain color with the color that they
make.  For example you would not want to have green text on a yellow
background.  That would make things a bit hard to see.  You could however
have yellow text on a blue background.  Why you might ask?  Because it is
also another rule of thumb to have either a dark color as a background and a
light color as text or vice versa.
Yellow = it is the color of the sun, many times it can be very bright, other
times rather soothing to the eyes again depending on the time of day, and
its background.  You can use yellow as a background color quite effectively
with black text if it is a light but not too bright yellow background.  Why
you might ask, just associate yellow as day and black as night.  So yes,
yellow text on a black background will also work.
black= well for some of us black is probably pretty self explanatory.  Black
means no light can pass through.  A black background can be used if
contrasted with a bright color such as yellow, green, red, orange.  To fully
understand black you have to also understand the mood associated with it.
To some black is scary, to some black is also a mysterious color.  You must
also understand black in the way that it works in the sense of a computer
monitor.  All televisions and monitors work off of the same principal.
There are 3 colors that can make every color that is visible on a screen.
Red, green and blue.  The description of how the aliens could see in HG
Wells' War of the Worlds still amazes me considering when the book was
actually written.  Basically what you have with red green and blue are three
colors that can make any other color when mixed together with varying
brightnesses.  Now back to the black, black on a computer monitor is
produced when you drop the brightness of all three colors down to zero.  OK
I will shut up now, I do hope to write a book one day on the subject so I
don't want to give it all away in a single email, but I hope it made a
little sense to some.
JohnPG search for all of your Jaws scripts at
Also be sure to check out Blind Crawler's Legend of the Green Dragon server
There will be more to come from Blind Crawler very soon.
Administrator: John Greer
----- Original Message ----- 
From: "Alex Parks" <mehgcap@xxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Monday, October 29, 2007 1:25 PM
Subject: re: colors and backgrounds for web pages

>I normally just take the suggestions of one or two sighted people about
>colors, then ask others what they think and go with the color(s) that most
>liked.  It isn't a clean way of doing it and is far from independant, but
>it is the best I have seen.  I also have enough vision to imagine what
>things might look like, so if I know I want to use black and orange on a
>page I can picture (sort of) what black text on orange would look like and
>then orange on black.  You might also want a scheme like this, then use js
>to allow the viewer to dynamically change the scheme.
> Have a great day,
> Alex
>> ----- Original Message -----
>>From: "Lamar Upshaw" <lupshaw@xxxxxxxxxxxxxx
>>To: <programmingblind@xxxxxxxxxxxxx
>>Date sent: Mon, 29 Oct 2007 08:00:31 -0800
>>Subject: colors and backgrounds for web pages
>>Hi everyone,
>>Sighted people are giving me a hard time because my web pages
> aren't
>>breathing fires of colorful flames! *smile*  Where can I go, or
> what should
>>I study to learn about colors and backgrounds for web pages?
> Also, is this
>>something that blind people can really do? Or, will I need lots
> of sighted
>>With All Respect,
>>Upshaw, LaMar T
>>View the list's information and change your settings at
> __________
> View the list's information and change your settings at
> //

View the list's information and change your settings at

View the list's information and change your settings at 

Other related posts: