People have different perceptions of color, such as distinguishing contrast between color hues and degrees of brightness. To ensure accessibility, there are a few considerations that must be made.


Use High Contrast Colors


The WCAG 2.1 AA standards for contrast ratio between text and background are 4.5:1 for font sizes up to 18 points and 3:1 for font sizes above 18 points.


If you want to check the contrast of your text and background colors, you can use this online color checker tool.


Below is an example with a contrast of 2:1 between text and background. This combination would not be considered accessible.

Dark blue background with black text stating "Sample Text"


Below is an example with a contrast of 8:1 between text and background. This combination would be considered accessible.

Light blue background with black text stating "Sample Text"



Color Should Not Convey Meaning


Color should never be the only method of relating information or instructions. This ensures that students who cannot discern or differentiate certain colors can still succeed in the class and receive the same information.


Consider the following example. 


Students are asked to learn the definitions of the words in red from the list of terms below: 

  • cell
  • atom
  • nucleus
  • molecule
  • biology


If students cannot perceive the color red, how would they know which definitions should be learned?


Instead of relying on color alone, this list could use both bold and red font to indicate the proper terms. Alternatively, the needed terms could be marked with an asterisk (*), or the terms could be provided in two separate lists rather than all together.



Highlighting Colors


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 styles in your text editor. This will visually set the text apart and also make it easier to identify by someone using screen-reading technology tools.


Using bold or italic font styles to highlight important words or phrases is another alternative, if used sparingly. Using underlined font styles is not recommended.



Text Over Images


Avoid using images with text embedded across them. They are hard to read for even those without visual limitations. 


Cypress trees on a lake with the words "Office of Distance Learning" . The words are difficult to read.


Instead, put the text across a high-contrast background or place it as a caption. Also, be sure to include a descriptive Alt Text for those who cannot see the image at all.


Cypress trees on a lake with the words "Office of Distance Learning" on a high-contrast background. The words are easier to see.