Page Content
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 points+, or 14 points+ 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.
- Juicy Studio Color Contrast Ratio Analyzer
- Juicy Studio Accessibility Toolbar for Firefox
Note: May require Firefox ESR. - MSF & W Contrast Ratio Calculator
- WebAIM Color Contrast Checker
- Colour Contrast Application (Windows and Mac)
- WCAG Luminosity Algorithm
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
| Grey Level | WCAG Ratio |
|---|---|
| #000000 (Black) | 21 : 1 (pass) |
| #333333 | 12.6 : 1 (pass) |
| #666666 | 5.7 : 1 (pass) |
| #777777 #777777 (large) |
4.5 : 1 (fail) OK for large text |
| #999999 | 2.8 :1 (fail) |
| #CCCCCC | 1.6 : 1 (fail) |
Gray/Black
| Grey Level | WCAG Ratio |
|---|---|
| #333333 | 1.7 : 1 (fail) |
| #666666 #66666 (large) |
3.7 : 1 (fail) AA for large text |
| #999999 | 7.4 : 1 (pass) |
| #FFFFF (White) | 21 : 1 (pass) |
Cyan/White
| Cyan Level | WCAG Ratio |
|---|---|
| #003333 | 13.8 : 1 (pass) Hard to detect as not black |
| #006666 | 6.8 : 1 (pass) |
| #009999 #009999 (large) |
3.5 : 1 (fail) AA for large text only |
| #00CCCC | 2.0 : 1 (fail) |
White/Sea Green
| Colors | WCAG Ratio |
|---|---|
| sea green on green #DDFFEE on #82C1B4 |
1:9:1 (fail) |
| sea green on darker green #DDFFEE on #32796D |
4.8:1 (pass at AA) |
Orange & Red/White
Orange and red can be difficult to work with because the color is neither very dark or very light and so is hard to contrast to a sufficient level.
| Colors | WCAG Ratio |
|---|---|
| red on white #FF0000 on #FFFFFF |
4.0:1 (fail) |
| crimson on white #CC0000 on #FFFFFF |
5.9:1 (pass at AA) |
| orange on white #FF6600 on #FFFFFF |
2.9:1 (fail) |
| red-orange on white #DD3300 on #FFFFFF |
4.6:1 (pass at AA) |