People have different perceptions of color, such as distinguishing contrast between color hues and degrees of brightness. Some of your students may not be able to see color at all because of limitations of their vision or their computer display. For that reason it is best to not use color as a distinguishing feature for formatting, navigation features, or calling attention to important items.
Color for Navigation
Do not rely on color cues alone for navigation, such as having users click on a red button to submit an assignment. While you may still use the color red for the submission button, make sure that the word "Submit" is also a text link associated with the button, not just as part of the graphic image.
Highlighting Sections
Using highlight colors as the background for important notes may actually obscure the readability of the text for some students. Other students may not be able to see the color at all. Rather than using the highlight colors, distinguish important sections by adding a heading with the appropriate heading level (Level 2, Level 3, etc.) in your text editor. This will visually set the text apart and also make it easier to identify by someone using a text-to-audio screen reader.
If you have access to the HTML code, you may also use the <strong></strong> tags to bracket important words. This set of tags will be interpreted by a screen reader to place emphasis on the words between, whereas the bold or italic formatting tags will not be conveyed by a screen reader at all.
Text over Images
Avoid using photographs and image with text embedded across them. They are hard to read for even those without visual limitations.
Instead put the text across a high-contrast background or place it as a caption.. Also be sure to include a descriptive alternate text for those who cannot see the image at all.
Contrast of Hue and Brightness
The Web Content Accessibility Guidelines (WCAG) 2.0 AA standards for contrast ration between text and background are 4.5 : 1 for smaller type and 3 : 1 for type above 18 points in size.
If you want to check the contrast of your text and background colors, you can use this online color checker tool.
Example with contrast 2:1 between text and background. This combination would not be considered accessible.
Example with contrast 8:1 between text and background. This combination would be considered accessible.
