Inadequate Color Contrast - Revision history

Irishb at 02:04, 18 November 2023

2023-11-18T02:04:22Z

Irishb at 23:44, 7 December 2017

2017-12-07T23:44:42Z

Irishb at 23:37, 7 December 2017

2017-12-07T23:37:50Z

Irishb at 23:36, 7 December 2017

2017-12-07T23:36:31Z

Irishb at 23:34, 7 December 2017

2017-12-07T23:34:53Z

Carpenti at 23:28, 7 December 2017

2017-12-07T23:28:24Z

Carpenti at 23:04, 7 December 2017

2017-12-07T23:04:35Z

Carpenti at 23:04, 7 December 2017

2017-12-07T23:04:11Z

Carpenti at 23:03, 7 December 2017

2017-12-07T23:03:47Z

Carpenti at 23:03, 7 December 2017

2017-12-07T23:03:20Z

@@ Line 35: / Line 35: @@
-===Typically Wordpress and Canvas will automatically format your page with adequate color contrast===
+===Typically Canvas and WordPress 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.
+However, if you wish to change the color of your text on your site here are directions:
@@ Line 45: / Line 45: @@
-====To change the color of your text within Wordpress:====
+====To change the color of your text within WordPress:====
 #Highlight the text you want to change to another color.
 #Select the icon for '''Toggle Toolbar'''
@@ Line 52: / Line 52: @@
-====Tools To Check Color Contrast Within Your Text:====
+====Tools to Check Color Contrast within Your Text:====
 [https://webaim.org/resources/contrastchecker/ 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.
@@ Line 71: / Line 71: @@
 <div class="col-md-1"></div>
 <div class="col-md-3 sidebar">
-====Accessibility Reasorces====
+====Accessibility Resources====
 *[https://www.evergreen.edu/accessibility Evergreen's Guide on Accessible Technology]
 *[[Accessibility_Help|Accessibility Help Page]]

@@ Line 37: / Line 37: @@
 ===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 42: / Line 43: @@
 #Click on the '''Text color''' icon (letter "A" at left in the toolbar).
 #Click on a color in the drop-down menu to apply it to the text.<br>
 ====To change the color of your text within Wordpress:====

@@ Line 19: / Line 19: @@
 <span style="color:green;">Adequate color contrast</span>
 ====Using color can enhance the meaning of an important passage, however, it is important to be careful to choose colors for the text that contrasts well with the background color of the page. ====
@@ Line 36: / Line 37: @@
 ===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:====
 #Highlight the text you want to change to another color.

@@ Line 15: / Line 15: @@
 (Yellow is an example of a color that usually doesn't contrast well against a white background.)
 '''versus'''
@@ Line 30: / Line 29: @@
-'''However, a dark color such as blue usually contrasts well against a white background:'''
+'''However, a dark color such as purple usually contrasts well against a white background:'''
-<span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
+<span style="color:purple;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

@@ Line 14: / Line 14: @@
 <span style="color:yellow;">Example of inadequate color contrast </span>
-(Yellow is a example of a color that usually doesnt contrast well against a white background)
+(Yellow is an example of a color that usually doesn't contrast well against a white background.)
@@ Line 21: / Line 21: @@
 <span style="color:green;">Adequate color contrast</span>
+====Using color can enhance the meaning of an important passage, however, it is important to be careful to choose colors for the text that contrasts well with the background color of the page. ====
+'''A light color such as pink can be a problematic text color:'''
 ====Using color can enhance the meaning of an important passage, however, it is important to be careful to choose colors for the text that contrasts well with the background color of page.====
-−
-−
-−
-−
 '''A light color such as pink can be a problematic text color'''
 <span style="color:pink;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
@@ Line 36: / Line 30: @@
-'''However a dark color such as blue usually contrasts well against a white background'''
+'''However, a dark color such as blue usually contrasts well against a white background:'''
 <span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
@@ Line 42: / Line 36: @@
 ===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
+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:====
 #Highlight the text you want to change to another color.
 #Click on the '''Text color''' icon (letter "A" at left in the toolbar).
-#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.<br>
-−
-−
 ====To change the color of your text within Wordpress:====
@@ Line 70: / Line 58: @@
 ===Inadequate Color Contrast with Text Overlaying Images===
-Sometimes when including images with text the color of the text contrasted against the images, can make the text illegible. Here are some examples of images with adequate color contrast, and inadequate color contrast.
+Sometimes when including images with text, the color of the text contrasted against the images can make the text illegible. Here are some examples of images with adequate color contrast and inadequate color contrast.
-−
-−
 [[File:800px-Breaded Cat.edited.jpg|left|400px|thumbnail|A dark color against a dark image is a example of Inadequate color contrast]]
@@ Line 83: / Line 69: @@
 <div class="col-md-3 sidebar">
 ====Accessibility Reasorces====
-*[https://www.evergreen.edu/accessibility Evergreen's Guide on Accessible Technology ]
+*[https://www.evergreen.edu/accessibility Evergreen's Guide on Accessible Technology]
-*[[Accessibility_Help|Accessibility Help Page ]]
+*[[Accessibility_Help|Accessibility Help Page]]
 *[[Tips_for_Providing_Barrier-Free_Access|Tips for Providing Barrier-Free Access]]
 *[[Accessibility_Software|Accessibility Software]]
@@ Line 91: / Line 77: @@
 ====Canvas Accessiblility Checklist====
 *[[Accessibility_Checklist|Accessibility Checklist]]
-*[[Utilizing_Headings|Utilizing Headings ]]
+*[[Utilizing_Headings|Utilizing Headings]]
 *[[Inadequate_Color_Contrast|Inadequate Color Contrast]]
 *[[Utilizing_Descriptive_Text|Utilizing Descriptive Text]]
 *[[Proper_List_Format| Proper List Format]]
-*[[Alt_Text_and_Captioning|Alt Text and Captioning ]]
+*[[Alt_Text_and_Captioning|Alt Text and Captioning]]
 *[[Accessible_Video|Accessible Video]]
 *[[Create_an_Accessible_PDF|Create an Accessible PDF]]

@@ Line 73: / Line 73: @@
-[[File:800px-Breaded Cat.edited.jpg|left|400px|thumbnail|Inadequate color contrast between the text and the image]]
+[[File:800px-Breaded Cat.edited.jpg|left|400px|thumbnail|A dark color against a dark image is a example of Inadequate color contrast]]
-[[File:Cat-2902599 960 720.edited.jpg|400px|thumbnail|left|Adequate Color Contrast between text and image]]
+[[File:Luggage-1643010 960 720edited.jpg|400px|thumbnail|left|However a light text color like white against a dark image is an example of adequate color contrast]]
 <!-- end col-md-8 -->

← Older revision		Revision as of 23:04, 7 December 2017
Line 13:		Line 13:

	<span style="color:yellow;">Example of inadequate color contrast </span>		<span style="color:yellow;">Example of inadequate color contrast </span>
		+

	(Yellow is a example of a color that usually doesnt contrast well against a white background)		(Yellow is a example of a color that usually doesnt contrast well against a white background)

← Older revision		Revision as of 23:03, 7 December 2017
Line 23:		Line 23:


−	====Using color can enhance the meaning of an important passage, however, it is important to be careful to choose colors for the text that contrasts well with the background color of page.===='''A light color such as pink can be a problematic text color'''	+	====Using color can enhance the meaning of an important passage, however, it is important to be careful to choose colors for the text that contrasts well with the background color of page.====
		+
		+
		+
		+	'''A light color such as pink can be a problematic text color'''

	<span style="color:pink;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>		<span style="color:pink;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>