Contrast and Color on Web Pages

Synopsis

An important aspect of color on the Web for both low vision and colorblind users is sufficient contrast between foreground (text or graphics) and the background. Maximum contrast is black versus white, but this combination can be considered too overwhelming (it might cause glare). Other colors can be used—such as navy, dark green, or maroon for darks, and pastels for lights—to lessen the contrast.

However, some modern designs are so "subtle" that the contrast can actually be insufficient for some readers. Examples include contrasting light grey versus middle grey, middle pastels versus darks, or white versus light cyan (blue-green). If you plan to use a subtle color palette, it is recommended that you use a color analyzer to ensure there is sufficient contrast.

In most online tests, you enter in the hexadecimal color code for the foreground (text) and background colors, and the tester generates a numeric result. Usually a low number or ratio indicates too little contrast.

Contrast Tests

WCAG 2.0

The WCAG 2.0 guildine 1.4.3 recommends the following luminosity ratio standard of 1 to 4.5 for main text and 1 to 3 for large-scale text (18 pixels+, or 14 pixels+ bold).
NOTE: If your target audience is mostly low vision, then a ratio of 1 to 7 is recommended.

WCAG 2.0 Guideline 1.4.3

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.

The following links allow developers to test contrast between two Web color codes.

Sample Palettes

Vivid Colors

The contrast of many vivid colors (e.g. red/green, blue/orange, etc) fail the contras test because they are similar in values in terms of lightness darkness. See the Working with Bright Colors page for more details.

Gray/White

If your color scheme fails one of the above tests, it's likely that only a few minor adjustments will be needed to bring the color values to a more acceptable level. See the examples below.

NOTE: "Large text"=18 pixels, or 14 pixels bold

Tests on Different Values of Gray on White
Grey Level WCAG Ratio
#000000 (Black) 21 : 1 (pass)
#333333 12.63 : 1 (pass)
#666666 5.74 : 1 (pass)
#777777
#777777 (large)
4.48 : 1 (fail)
OK for large text
#999999 2.85 :1 (fail)
#CCCCCC 1.61 : 1 (fail)

Gray/Black

Tests on Different Values of Gray on Black
Grey Level WCAG Ratio
#333333 2.16 : 1 (fail)
#666666
#66666 (large)
3.66 : 1 (fail)
AA for large text
#999999 7.37 : 1 (pass)
#FFFFF (White) 21 : 1 (pass)

 

Cyan/White

Tests on Different Levels of Cyan on White
Cyan Level WCAG Ratio
#003333 13.8 : 1 (pass)
Hard to detect as not black
#006666 6.79 : 1 (pass)
#009999
#009999 (large)
3.49 : 1 (fail)
AA for large text
#00CCCC
2.00 : 1 (fail)

White/Sea Green

Two versions of Sea Green on Green
Colors WCAG Ratio
sea green on green
#DDFFEE on #82C1B4
1:92:1 (fail)
sea green on darker green
#DDFFEE on #32796D
4.79:1 (pass at AA)

Orange/White

Orange can be difficult to work with because the color is neither very dark or very light and so is hard to contrast to a sufficent level.

Colors WCAG Ratio
Two versions of Orange/White
orange on white
#FF6600 on #FFFFFF

2.94:1 (fail)

red-orange on white
#DD3300 on #FFFFFF

4.61:1 (pass at AA)

 

Top of Page