Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element

This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases

WCAG:1.4.1

This success criterion addresses color perception specifically. Other forms of perception are covered in EPIC a11y Adaptable including programmatic access to color and other visual presentation coding.

NOTE This should not in any way discourage the use of color on a page, or even color coding if it is redundant with other visual indication.

[ ] (i) Ensuring that information conveyed by color differences is also available in text
[ ] (ii) Including a text cue for colored form control labels
[ ] (iii) Ensuring that additional visual cues are available when text color differences are used to convey information Colored text when the color is used to convey information such as:
Words that are links in a paragraph
Items in a list where some are different than others and are presented in colored text
[ ] (iv) Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

Examples

A form that uses color and text to indicate required fields A form contains both required and optional fields. Instructions at the top of the form explain that required fields are labeled with red text and also with an icon whose text alternative says, "Required." Both the red text and the icon are programmatically associated with the appropriate form fields so that assistive technology users can determine the required fields.
An examination. Students view an SVG image of a chemical compound and identify the chemical elements present based on the colors and numbers used in the diagram. The text alternatives associated with each element name the color of the element and indicate the element's position in the diagram. Students who cannot perceive color have the same information about the compound as their classmates. (This technique also satisfies Guideline 1.1 Level A.)
Disabled Form elements. Form elements which are disabled via markup or scripting, are greyed out and made inactive by the user agent. When in the disabled state these elements do not receive focus. Assistive technologies can programmatically determine the state of disabled elements and will provide this information to the user as the elements are encountered on the page. The change in color and loss of focus provides redundant, visual information about the state of the control.
Test Procedure

Procedure (i, ii, iii)
1. For each item where a color difference is used to convey information:
2. Check that the information conveyed is also
  1. available in text and that the text is not conditional content; OR
  2. same information is available through text or character cues character cues; OR
  3. also styled or uses a font that makes it visually distinct from other text around it.

Expected Results: Check 1 is true.

Procedure (iv)

Locate all instances where color alone is used to convey information about text.
Check that the relative luminance of the color of the text differs from the relative luminance of the surrounding text by a contrast ratio of at least 3:1.
Check that pointing (mouseover) to the link causes a visual enhancement (such as an underline, font change, etc.)
Check that moving keyboard focus to the link causes a visual enhancement (such as an underline, font change, etc.) Expected Results: Checks 2, 3, and 4 are all true.

Examples

Example 1: A color-coded schedule (i)

The schedule for sessions at a technology conference is organized into three tracks. Sessions for Track 1 are displayed over a blue background. Sessions in Track 2 are displayed over a yellow background. Sessions in Track 3 are displayed on a green background. After the name of each session is a code identifying the track in text: T1 for Track 1, T2 for Track 2, and T3 for Track 3.

Example 2: A color-coded schedule with icons (i)

The schedule for sessions at a technology conference is organized into three tracks. Next to the title of each session is an icon consisting of a colored circle with a number in the middle showing what track it belongs to: blue circles with the number 1 represent track 1, yellow circles with the number 2 represent Track 2, and green circles with the number 3 represent Track 3. Each icon is associated with a text alternative reading "Track 1," "Track 2," or "Track 3," as appropriate.

Example 3: A form with required fields - The default formatting for links on a page includes presenting them both in a different color than the other text on the page underlining them to make the links identifiable even without color vision.

An article comparing the use of similar elements in different markup languages uses colored text to identify the elements from each language. Elements from the first markup language are identified using BLUE, bolded text. Elements from the second are presented as RED, italicized text.
A news site lists links to the articles appearing on its site. Additional information such as the section the article appears in, the time the article was posted, a related location or an indication that it is accompanied by live video appears in some cases. The links to the articles are in a different color than the additional information but the links are not underlined, and each link is presented in a larger font than the rest of the information so that users who have problems distinguishing between colors can identify the links more easily.
Short news items sometimes have sentences that are also links to more information. Those sentences are printed in color and use a sans-serif font face while the rest of the paragraph is in black Times-Roman.

A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, . The instructions for completing the form indicate that "all required fields are displayed in red and marked with an asterisk ", followed by an example.

NOTE Asterisks may not be read by all screen readers (in all reading modes) and may be difficult for users with low vision because they are rendered in a smaller size than default text. It is important for authors to include the text indicating that asterisk is used and to consider increasing the size of the asterisk that is presented.

Example 4: A form with a green submit button (i)

An on-line loan application explains that green buttons advance in the process and red buttons cancel the process. A form contains a green button containing the text Go. The instructions say "Press the button labeled Go to submit your results and proceed to the next step."

Example 5: Required fields in an HTML form (ii)

The instructions for an online form say, "Required fields are shown in red and marked with (required)." The cue "(required)" is included within the label element.

<label for="lastname" class="required">Last name (required): </label>
<input id="lastname" type="text" size="25" value=""/>
<style type="text/css">
  .required {
    color:red;
  }
</style>

Example 6 (ii)

:x: A form indicates a required field by showing its label in a different color (color only)

.req {color: red;}

<p> Required fields have <span class="req">red</span> labels.</p>
<form action="http://www.test.com" method="post">
<label for="firstname"><span class="req">First name</span>: </label>
<input type="text" name="firstname" id="firstname" />

:heavy_check_mark: The form indicates a required field by showing a red asterisk next to its label (color + shape).

.req {color:red; font-size: 150%}

<p> Required fields are marked with a red asterisk (<span class="req">*</span>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname"><span class="req">* </span>First name: </label>
<input type="text" name="firstname" id="firstname" />

Example 7 (iii)

The default formatting for links on a page includes presenting them both in a different color than the other text on the page underlining them to make the links identifiable even without color vision.
An article comparing the use of similar elements in different markup languages uses colored text to identify the elements from each language. Elements from the first markup language are identified using BLUE, bolded text. Elements from the second are presented as RED, italicized text.
A news site lists links to the articles appearing on its site. Additional information such as the section the article appears in, the time the article was posted, a related location or an indication that it is accompanied by live video appears in some cases. The links to the articles are in a different color than the additional information but the links are not underlined, and each link is presented in a larger font than the rest of the information so that users who have problems distinguishing between colors can identify the links more easily.
Short news items sometimes have sentences that are also links to more information. Those sentences are printed in color and use a sans-serif font face while the rest of the paragraph is in black Times-Roman.

Example 1: Colors that would provide 3:1 contrast with black words and 4.5:1 contrast with a white background

Refer to Links with a 3:1 contrast ratio with surrounding text

Example 2

The hypertext links in a document are medium-light blue (#3366CC) and the regular text is black (#000000). Because the blue text is light enough, it has a contrast of 3.9:1 with the surrounding text and can be identified as being different than the surrounding text by people with all types of color blindness, including those individuals who cannot see color at all.

solex2006 / SELIProject