- From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
- Date: Sat, 08 Oct 2011 13:54:08 +0000
- To: public-wcag2-techs@w3.org
Submitter's Name: GreggVan Submitter's Email: gv@trace.wisc.edu Technique ID: UNKNOWN Short Name: Using relative lightness in addition to color to convey information Technique Category: General Techniques Success Criterion Reference: UNKNOWN Applicability: Description: The objective of this technique is to show how color can be used successfully and accessibly in conveying information. A major purpose of this guideline is also to make it clear that color as used in the success criteria means 'hue" and not lightness or darkness. - red and pink can be the same color (hue) with just different amounts of lightness - white is a color (mixture of colors) (hues) - black is the absence of all colors (hues) So in this technique one can use lightness along with color (hue) in order to cause it to be different visually - to a person with a difference in their color perception or even the lack of ability to view color at all. Note that for people with color vision differences, it is not alway possible to easily predict what the image will look like -- nor is is possible to equate black and white vision to a color deficiency. That is, something that is clear in black and white might not be clear to a person with a color vision difference. For example - if a person has no ability to perceive red - then something presented in high wavelength red (fully saturated) (contains no green or blue) will look black to them even though it would not look black to a black and white camera. If lightness/darkness is used as the only other cue besides hue then it is advised that the page be checked with tools that can simulate various color deficiencies to check this. However a contrast tool may be easier to use to compare the lightness difference between the two items . For items that are adjacent ( two bars on a chart that touch each other) a contrast of 4.5:1 or better is recommended For items that are not adjacent a contrast of at least 7:1 and preferably higher is recommended. Boldness (thickness) can also be used both to make a something even more different and to ensure that it is visually distinguishable / noticeable. Example 1 Head: Bar and line charts. Example 1 Description: There is a chart showing the different ratings for two computers across a range of tests. The two computers are coded red and green. The two bars for each test are side by side and touch each other. The green bar is made lighter so that the contrast ratio between the red and the green bar is 5:1. In the legend the colors are also presented touching. ALthough color is used to show the the two computer, the relative contrast (lightness ) between them is sufficient that it is easy for all people, regardless of their color vision, to tell which is which. On the same page it compares the two computers with a line chart. Although the lines do touch at one point, in order to be sure, a contrast of 7:1 is used between the two lines. This means that one line has less than 4:1 contrast with the white background but this is not a problem since there is not difficulty telling the line from the background and the 4.5:1 contrast rule only applies to text for readability and not to charts. Example 2 Head: Links are shown by being a different color plus bold Example 2 Description: On a page it is desired to not have underlines in the paragraph to show links. So colors are used instead. However it is not possible to have the color of the links be enough different in lightness from the regular text and still be sufficiently different from the background to meet the color contrast provision. The links could be 4.5:1 different from both a white (or black) background and still be 4.5 different than each other. This could be done - and would technically meet the success criteria but would not meet the 7:1 or better contrast recommended by this technique for things that are not in contact with each other. In this case boldness is also used to further enhance the visual difference. Related Techniques: G14 G17 G18 G145 G174 G183 Test Procedure: 1) find all the places where differences in color (hue) is used to convey information in any way 2) check to see if there is some other means of conveying the information (e.g. underline, bold, etc.) 3) check to see if the contrast between the two items (or any two items) is greater than 4:5:1 if they are touching and 7:1 if they are not. Expected Result: Either # 2 or #3 is True No guidelines reference was submitted! No UA issues were submitted! No resource 1 title submitted! No resource 1 URI submitted! No resource 2 title submitted! No resource 2 URI submitted! No test file 1 was submitted! No test file 1 pass/fail was submitted! No test file 2 was submitted! No test file 2 pass/fail was submitted! No additional notes were submitted! ------------------------------------------------ <technique id="UNKNOWN"> <short-name>Using relative lightness in addition to color to convey information</short-name> <applies-to> <guideline idref="" /> <success-criterion idref="UNKNOWN" /> </applies-to> <applicability> </applicability> <ua_issues> </ua_issues> <description> The objective of this technique is to show how color can be used successfully and accessibly in conveying information. A major purpose of this guideline is also to make it clear that color as used in the success criteria means 'hue" and not lightness or darkness. - red and pink can be the same color (hue) with just different amounts of lightness - white is a color (mixture of colors) (hues) - black is the absence of all colors (hues) So in this technique one can use lightness along with color (hue) in order to cause it to be different visually - to a person with a difference in their color perception or even the lack of ability to view color at all. Note that for people with color vision differences, it is not alway possible to easily predict what the image will look like -- nor is is possible to equate black and white vision to a color deficiency. That is, something that is clear in black and white might not be clear to a person with a color vision difference. For example - if a person has no ability to perceive red - then something presented in high wavelength red (fully saturated) (contains no green or blue) will look black to them even though it would not look black to a black and white camera. If lightness/darkness is used as the only other cue besides hue then it is advised that the page be checked with tools that can simulate various color deficiencies to check this. However a contrast tool may be easier to use to compare the lightness difference between the two items . For items that are adjacent ( two bars on a chart that touch each other) a contrast of 4.5:1 or better is recommended For items that are not adjacent a contrast of at least 7:1 and preferably higher is recommended. Boldness (thickness) can also be used both to make a something even more different and to ensure that it is visually distinguishable / noticeable. </description> <examples> <ex_head_1> Bar and line charts. </ex_head_1> <ex_desc_1> There is a chart showing the different ratings for two computers across a range of tests. The two computers are coded red and green. The two bars for each test are side by side and touch each other. The green bar is made lighter so that the contrast ratio between the red and the green bar is 5:1. In the legend the colors are also presented touching. ALthough color is used to show the the two computer, the relative contrast (lightness ) between them is sufficient that it is easy for all people, regardless of their color vision, to tell which is which. On the same page it compares the two computers with a line chart. Although the lines do touch at one point, in order to be sure, a contrast of 7:1 is used between the two lines. This means that one line has less than 4:1 contrast with the white background but this is not a problem since there is not difficulty telling the line from the background and the 4.5:1 contrast rule only applies to text for readability and not to charts. </ex_desc_1> <ex_head_2> Links are shown by being a different color plus bold </ex_head_2> <ex_desc_2> On a page it is desired to not have underlines in the paragraph to show links. So colors are used instead. However it is not possible to have the color of the links be enough different in lightness from the regular text and still be sufficiently different from the background to meet the color contrast provision. The links could be 4.5:1 different from both a white (or black) background and still be 4.5 different than each other. This could be done - and would technically meet the success criteria but would not meet the 7:1 or better contrast recommended by this technique for things that are not in contact with each other. In this case boldness is also used to further enhance the visual difference. </ex_desc_2> </examples> <resources> <resources_title1> </resources_title1> <resource_uri1> </resource_uri1> <resources_title2> </resources_title2> <resource_uri2> </resource_uri2> </resources> <related_techniques> <related_technique> G14 </related_technique> <related_technique> G17 </related_technique> <related_technique> G18 </related_technique> <related_technique> G145 </related_technique> <related_technique> G174 </related_technique> <related_technique> G183 </related_technique> </related_techniques> <tests> <procedure> 1) find all the places where differences in color (hue) is used to convey information in any way 2) check to see if there is some other means of conveying the information (e.g. underline, bold, etc.) 3) check to see if the contrast between the two items (or any two items) is greater than 4:5:1 if they are touching and 7:1 if they are not. </procedure> <expected_result> Either # 2 or #3 is True </expected_result> <test_file_1> </test_file_1> <pass_fail_1> </pass_fail_1> <test_file_2> </test_file_2> <pass_fail_2> </pass_fail_2> </tests> </technique> Additional Notes:
Received on Saturday, 8 October 2011 13:54:12 UTC