W3C home > Mailing lists > Public > w3c-wai-gl@w3.org > April to June 2002

RE: Color Contrast

From: Lee Roberts <uce@roserockdesign.com>
Date: Mon, 15 Apr 2002 11:43:37 -0500
To: "WCAG List" <w3c-wai-gl@w3.org>, "john_slatin" <john_slatin@forum.utexas.edu>
Message-ID: <NFBBJHFEOLAGEICMIMBPGEDACEAA.uce@roserockdesign.com>
MessageOne link slipped by me.  I'm adding it now
so that people will have an understanding as to
why dark backgrounds with light text should not be

Please refer to the section entitled "Pump up the
Contrast".  This section decribes the problems
with contrast and how contrast works.

Yes, Catherine Rigdon's information is useful.  It
may be helpful to refer to it.

Lee Roberts
  -----Original Message-----
  From: john_slatin
  Sent: Monday, April 15, 2002 11:11 AM
  To: 'Lee Roberts'
  Subject: RE: Color Contrast

  Thanks for these links, Lee.  This is very
helpful.  Another good resource is the site "Safe
web colours" by Catherine Rigdon of British
Telecom (hence the "u" in "colours").  The site
offers a number of color charts and sample
palettes, with illustrations that show how
different colors appear to people with different
types of color-deficient vision.  Also good advice
about design issues (including the advice Lee
lists several times about choosing complementary
colors, i.e., from opposite places on the color
wheel).  At

  One small caveat about the success criteria: it
may not *always* be a good idea to require that
text be darker than the background-- for some
users, the effect of text illuminated against a
dark ground (e.g., yellow on black, white on
black, etc.) is more readable.

  John Slatin
  -----Original Message-----
  From: Lee Roberts
  Sent: Monday, April 15, 2002 11:03 am
  To: WCAG List
  Subject: Color Contrast

  Action LR: draft success criteria for contrast

  The most common color perception problems are
with certain color combinations such as yellow on
green, green on red, red on green, blue on red,
red on blue, and red on black.

  The site above goes on to explain that using
colors from the same end of the spectrum is
difficult for people with colorblindness to tell
the difference in the colors.  Additionally, light
colors on dark colors are difficult to read as
there is not enough area in the light areas to
provide enough of a contrast.  Using varying
shades of the same color also creates problems.

  If you intend on using red and green , make sure
that when one changes to the other, that there is
a suitable blinking, noise text or something to
augment it. Please stay away from pastels, washed
out colors, low intensity colors, and color
combinations from the same part of the spectrum.

  This site suggests using colors from opposite
ends of the spectrum.  Additionally, it has
several color charts that depict the difference in
color spectrum and contrasting colors.  There is a
great deal of information on the subject on this

  An excellent resource for showing what the site
will look like to someone that is colorblind.

  This site has an applet that will show how
colors look to the color-blind.

  Excellent color comparisons.

  Success Criteria:

  Achievement of color contrast will be based upon
the following areas:
  1.  Text should be darker than the background.
  2.  Text and background will have sufficient
contrast to distinguish the differences.
  3.  The saturation of colors will be
sufficiently different to distinguish the
  4.  The hue of the colors will be sufficiently
different to distinguish the differences.
  5.  Color combinations of yellow on green, green
on red, red on green, blue on red, red on blue,
and red on black will not be used.
  6.  Use a light grey or off-white instead of
plain white as the background.

  Lee Roberts
  Rose Rock Design, Inc.
  Building web sites accessible by EVERYONE
Received on Monday, 15 April 2002 12:41:14 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 16 January 2018 15:33:41 UTC