Difference between revisions of "Inadequate Color Contrast"

From Help Wiki
Line 8: Line 8:
  
 
Without sufficient color contrast between font and background, people who are color blind or have low vision may not benefit from the information. And using color alone to convey meaning will leave those who are color blind or blind unable to interpret the meaning.  
 
Without sufficient color contrast between font and background, people who are color blind or have low vision may not benefit from the information. And using color alone to convey meaning will leave those who are color blind or blind unable to interpret the meaning.  
===To change the color of your text within Canvas:===
+
 
 +
 
 +
<span style="color:grey;">Example of inadequate color contrast </span>
 +
 
 +
 
 +
'''versus'''
 +
 
 +
 
 +
<span style="color:green;">Adequate color contrast</span>
 +
 
 +
===Typically Wordpress and Canvas will automatically format your page with adequate color contrast, however, if you wish to change the color of your text on your site here are some directions===
 +
====To change the color of your text within Canvas:====
  
  
Line 23: Line 34:
 
#Click on a color in the drop-down menu to apply it to the text.  
 
#Click on a color in the drop-down menu to apply it to the text.  
 
   
 
   
 
 
<span style="color:grey;">Example of inadequate color contrast </span>
 
 
 
'''versus'''
 
 
 
<span style="color:green;">Adequate color contrast</span>
 
  
 
   
 
   

Revision as of 13:15, 7 December 2017

How to utilize adequate color contrast within your web-based content.

Without sufficient color contrast between font and background, people who are color blind or have low vision may not benefit from the information. And using color alone to convey meaning will leave those who are color blind or blind unable to interpret the meaning.


Example of inadequate color contrast


versus


Adequate color contrast

Typically Wordpress and Canvas will automatically format your page with adequate color contrast, however, if you wish to change the color of your text on your site here are some directions

To change the color of your text within Canvas:

  1. Highlight the text you want to change to another color.
  2. Click on the Text color icon (letter "A" at left in the toolbar).
  3. Click on a color in the drop-down menu to apply it to the text.


To change the color of your text within Wordpress:

  1. Highlight the text you want to change to another color.
  2. Select the icon for Toggle Toolbar
  3. Click on the Text color icon (letter "A" at left in the toolbar).
  4. Click on a color in the drop-down menu to apply it to the text.



Tools:

WebAim Color Contrast Checker The WebAim Color Contrast Checker is a free site that can check the legibility of text and image by comparing the color of the text against the color of the background.

Colour Contrast Analyser The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.