Re: Colors On Web Pages

  • From: james.homme@xxxxxxxxxxxx
  • To: programmingblind@xxxxxxxxxxxxx
  • Date: Wed, 31 Oct 2007 07:48:52 -0400

This is an example of inline styles. Don't use them if you can help it. You
will break accessibility.


James D Homme, , Usability Engineering, Highmark Inc.,
james.homme@xxxxxxxxxxxx, 412-544-1810

"Never doubt that a thoughtful group of committed citizens can change the
world.  Indeed, it is the only thing that ever has." -- Margaret Mead

             "Bryan Garaventa"                                             
   >                                               To 
             Sent by:                  programmingblind@xxxxxxxxxxxxx      
             programmingblind-                                          cc 
             org                                                   Subject 
                                       Re: Colors On Web Pages             
             10/30/2007 09:07                                              
             Please respond to                                             

You could use CSS to accomplish this, or surround each with a Div or Span

I believe the syntax is:
style="background-color: #xxxxxx"
But doing a search for "CSS manual" can identify this more clearly.

I'm not sure if you can use the actual color names within CSS though, so if
you want the literal HEX values for all 548 available colors, the color
picker at will do this.

Best wishes,


----- Original Message -----
From: "Alex Parks" <mehgcap@xxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Tuesday, October 30, 2007 5:30 PM
Subject: Re: Colors On Web Pages

> This is getting into coding, but how do you make sections different
> colors? I have a blog I keep online (not through a site--I wrote the code
> and all and use js files to insert most of it, so I can play with this
> sort of thing).  I have the blog, a contact form, and a misc section.
> can I give each section its own bgcolor? Thanks for the help.
> Have a great day,
> Alex
>> ----- Original Message -----
>>From: "Will Pearson" <will@xxxxxxxxxxxxx
>>To: <programmingblind@xxxxxxxxxxxxx
>>Date sent: Wed, 31 Oct 2007 00:11:50 -0000
>>Subject: Re: Colors On Web Pages
>>I don't think that there are any generic rules for colour choice
> that fit
>>all purposes.  The best thing to do is to base the design of
> something on
>>how you expect people to interact with it and how those people
> function.
>>I agree that black on white is a reasonable choice for reading
> ease;
>>however, if people are going to be looking at something for a
> long time then
>>pure white, which can be very bright, can cause a lot of glare
> and actually
>>reduce reading ease.  So, using something just off white might be
> more
>>appropriate if someone is expected to look at something for a
> while.
>>If ease of navigation around the screen is a priority then I
> would actually
>>encourage blocks of colour.  For example, having the background
> for a menu
>>one colour, the background for the main content another colour,
> and so on.
>>Unifying content to form a perceptual block by giving the content
> the same
>>background colour will enable someone to shift their attention to
> another
>>block of content faster and easier.  There is research evidence
> that people
>>shift their attention based on perceptual groups.
>>So, I would say that you need to choose colours based on the task
> that
>>someone is performing and how you expect them to perform that
> task.  You'll
>>probably get an artist saying different but then it's still an
> open question
>>as to whether form or function has greater importance.  I guess
> I'm pretty
>>biased in favour of function given I'm a human factors
> researcher, and I
>>spend most of my days thinking about how to make novel user
> interfaces
>>easier to use.
>>----- Original Message -----
>>From: <james.homme@xxxxxxxxxxxx
>>To: <programmingblind@xxxxxxxxxxxxx
>>Sent: Tuesday, October 30, 2007 1:25 PM
>>Subject: Re: Colors On Web Pages
>>> Hi,
>>> I ran this by a usability person here.  Her comments are above
> the original
>>> text.
>>> I would say it's an accurate description of the meaning and mood
> of the
>>> colors he describes.
>>> But I don't really agree with the advice of using colored text
> or a
>>> colored
>>> background for Web site design.  From a usability perspective,
> the high
>>> contrast of black text on a white background is the
>>> best choice.  Most sites use color in images, borders, and for
> some
>>> headings
>>> and link text - but typically the main content of the page is
> black on
>>> white.  Another choice is to have a background
>>> color on the sides, and a center section (about 2/3 of the page)
> that's
>>> white with black text.
>>> Of course, there are beautiful and easy-to-read sites that use a
> variety
>>> of
>>> colored backgrounds, text, and images.  But, that is not
> something that
>>> most
>>> sighted people can achieve.  Typically, to do
>>> a good job with visual design, you need an artist or graphic
> designer.
>>> That's my 2 cents!
>>> 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.
>>> Jim
>>> James D Homme, , Usability Engineering, Highmark Inc.,
>>> james.homme@xxxxxxxxxxxx, 412-544-1810
>>> "Never doubt that a thoughtful group of committed citizens can
> change the
>>> world.  Indeed, it is the only thing that ever has." -- Margaret
> Mead
>>> __________
>>> 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

View the list's information and change your settings at 

Other related posts: