Guidelines
- Be sure that there is adequate contrast between text and background
- The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1, except for the following:
- 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.
- Text or diagrams, and their background, must have a sufficient luminosity contrast ratio to distinguish foreground from background.
- Check with CSS turned off as well
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) |
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) |
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) |
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) |
| 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) |
Examples
Class Example (Before, Problems, After)
Section 508 Guideline
(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
WCAG 2.0 Guideline
- 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:
- 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.
Suggested Tools to Check Contrast
- Juicy Studios Firefox Extension: Shows the color contrast of all elements in the DOM
- Firefox Accessibility Extenstion: Select Color Contrast from the Style menu.
- IE Web Accessibility Toolbar: Use Juicy Studios tools under Color to check for contrast and color blindness usability. There are also Simulations under Tools.
Where can I find more information?
