Color/contrast differentiation

24 Jun 2009 - 3:12pm
5 years ago
4 replies
935 reads
Sarah Kampman
2008

Is there a standard or recommendation for minimum color contrast in a
software UI?

I will be using a white background for editable data and a light gray
background for read-only data. The text in both cases is black and is
quite readable. What I am unsure of is how light I can make the
read-only cells' gray background so that it is attractive and minimally
intrusive, but still differentiable for users with low vision, screen
glare, or projectors.

Unfortunately, all web searches are turning up tools and guidelines
around the contrast of foreground and background, not the comparison of
two different backgrounds. Any help or URLs will be appreciated!

Thanks in advance,
Sarah Kampman

Comments

24 Jun 2009 - 8:23pm
Renato Feijó
2009
24 Jun 2009 - 11:04pm
rob
2005

Sarah,

Look at http://colorusage.arc.nasa.gov/index.php
Use the color tool to experiment with different text and background colors,
hues, etc.

Hope this helps.
Rob Epstein

On Wed, Jun 24, 2009 at 11:12 PM, Sarah Kampman <skampman at planview.com>wrote:

> Is there a standard or recommendation for minimum color contrast in a
> software UI?
>
> I will be using a white background for editable data and a light gray
> background for read-only data. The text in both cases is black and is
> quite readable. What I am unsure of is how light I can make the
> read-only cells' gray background so that it is attractive and minimally
> intrusive, but still differentiable for users with low vision, screen
> glare, or projectors.
>
> Unfortunately, all web searches are turning up tools and guidelines
> around the contrast of foreground and background, not the comparison of
> two different backgrounds. Any help or URLs will be appreciated!
>
> Thanks in advance,
> Sarah Kampman
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

24 Jun 2009 - 3:46pm
mongillo
2009

Sarah,

The WCAG 2.0 spec offers up assistance regarding color contrast.

http://www.w3.org/TR/WCAG20/

and there are several tools out there that will provide the ratio
evaluation:

http://juicystudio.com/services/aertcolourcontrast.php#specify

1.4.3 Contrast (Minimum): The visual presentation of text and images
of text has a contrast ratio of at least 4.5:1, except for the
following: (Level AA)

Large Text: Large-scale text and images of large-scale text have a
contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user
interface component, that are pure decoration, that are not visible
to anyone, or that are part of a picture that contains significant
other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no minimum
contrast requirement.

HOpe this helps.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=43159

25 Jun 2009 - 8:02am
Anonymous

Another basic web tool to check contrast ratios and some high level
guidelines (I use this one at work)

http://www.webaim.org/resources/contrastchecker/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=43159

Syndicate content Get the feed