Color and contrast
Use high color contrast (background to foreground contrast, watermark to foreground contrast, etc.). The color contrast ratio between the background and text should be at least 4.5:1.
Watch video (1:36 mins)
Have high contrast combinations been used?
To check contrast:
Print the document in grayscale and/or turn down the color on the computer monitor
Examine items to ensure that there is sufficiently high contrast for elements, e.g.:
Table headers (text versus background fill)
Text in foreground versus background colors or images
Text in images
Watermarks versus text in foreground (the watermark should not interfere with the foreground text, as can happen when there is too little contrast)
Note: this is a subjective test
Note: For this requirement, contrast is being measured in a subjective manner. To have confidence that this requirement is being met, it may prove useful to show the document to a number of people of different ages (contrast sensitivity decreases with age) and visual capabilities. It also may be useful to examine the document under different types of lighting condition (from well lit rooms down to low light situations).
Use high color contrast (background to foreground contrast, watermark to foreground contrast, etc.). The color contrast ratio between the background and text should be at least 4.5:1.
Correct:
(Select the image to download example file in MS Word format)
Incorrect:
(Select the image to download example file in MS Word format)
Use high color contrast (background to foreground contrast, watermark to foreground contrast, etc.). The color contrast ratio between the background and text should be at least 4.5:1.
Users with low vision and color blindness may have difficulty reading documents that do not present sufficient contrast and color difference between background and foreground elements.
Legal References
508 references:
1194.21(g); 1194.21(i); 1194.22(c); 1194.31(a); 1194.31(b).
WCAG references:
1.4.1 Use of Color; 1.4.3 Contrast (minimum); WCAG-AAA: 1.4.6 ; 1.4.8.
All Microsoft Word Requirements
Text, images, and non-decorative graphics (bullets, dividers, etc.) must be visible when viewed in "High Contrast" mode.
Watch video (1:47 mins)
Are items visible in High Contrast Mode?
To ensure that text displays well in High Contrast Mode:
-
When choosing font colors, use the Automatic setting. Text that is set to Automatic will render properly in High Contrast mode.
To ensure that non-text elements display well in High Contrast Mode:
Print out a copy of the document for comparison with the screen display
-
Turn on High Contrast Mode: Left Alt + Left Shift + Print Screen
Check that items are still easily visible, e.g.:
Text
Bullet characters
Graphics
Table borders
Information conveyed through color
Adjust color settings accordingly
Note: It may be necessary to switch between High Contrast and regular viewing modes a number of times during this process.
Text, images, and non-decorative graphics (bullets, dividers, etc.) must be visible when viewed in "High Contrast" mode.
Correct:
(Select the image to download example file in MS Word format)
Incorrect:
(Select the image to download example file in MS Word format)
Text, images, and non-decorative graphics (bullets, dividers, etc.) must be visible when viewed in "High Contrast" mode.
Users with low vision must be able to see the document content when displayed in "High Contrast" mode.
Legal References
508 references:
1194.21(g); 1194.21(i); 1194.22(c); 1194.31(a); 1194.31(b).
WCAG references:
1.4.1 Use of Color; 1.4.3 Contrast (minimum); WCAG-AAA: 1.4.6 ; 1.4.8.
All Microsoft Word Requirements
Information conveyed through color must also be conveyed textually.
Watch video (1:43 mins)
Is information conveyed through color also conveyed textually?
To examine information for color redundancy:
Identify elements where color is used to convey meaning, e.g.:
Pie charts
Bar charts
Table data cells (text and background/fill)
Figures
Status (statements, indicators)
Instructions
Flowcharts
-
Determine whether there a text equivalent is used to convey the same information.
-
Add a text equivalent on or adjacent to the element that conveys the same information.
Note: Information conveyed in text may be placed in the alt-text, but it should not be the only place that the text is shown. The information should be clearly visible at all times for all users of the interface. Using alt-text attributes to "pop up" information normally conveyed in color is inappropriate, because people who have color vision problems are not required to have their interface set to show alt-text on mouse-over.
Information conveyed through color must also be conveyed textually.
Correct:
(Select the image to download example file in MS Word format)
Incorrect:
(Select the image to download example file in MS Word format)
Information conveyed through color must also be conveyed textually.
Users who are blind, low vision, or color blind require alternatives for information conveyed by color. In addition to static colors, this includes color used to indicate dynamic changes in status, alerts, errors, etc.
Legal References
508 references:
1194.21(g); 1194.21(i); 1194.22(c); 1194.31(a); 1194.31(b).
WCAG references:
1.4.1 Use of Color; 1.4.3 Contrast (minimum); WCAG-AAA: 1.4.6 ; 1.4.8.
All Microsoft Word Requirements