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
+
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.
Users who cannot perceive the difference between the optional field labels and the
red labels for the required fields will still be able to see the icon next to the
- red labels.
-
An examination
-
Students view an SVG image of a chemical compound and identify the chemical elements
+ red labels.
+
+
An examination
+
Students view an SVG image of a chemical compound and identify the chemical elements
present based both on the colors used, as well as numbers next to each
element. A legend shows the color and number for each type of element. Sighted users who
cannot perceive all the color differences can still understand the image by relying on
- the numbers.
-
-
+ the numbers.
+
+
Focus on links
+
A block of text contains a non-underlined blue hyperlink that has a contrast of 3.8:1 to the surrounding text. When receiving keyboard focus, the link's text color changes to a darker blue. The contrast difference between the link color in the focused and the unfocused state is only 2:1. In addition, when focused the contrast difference between the link's text color and the surrounding text falls to 2:1, i.e., it is now well below a 3:1 ratio. However, to further emphasize the focused state the link is provided an additional underline. Due to the additional underline, color is not used as the only visual indicator of the focused hyperlink, so it passes Success Criterion 1.4.1 Use of Color. Without the underline, the hyperlink would have failed this Success Criterion. (Note that the underline must have a contrast of at least 3:1 against the background, otherwise it would fail Success Criterion 1.4.11 Non-text Contrast.)
+
+
+ In the default state, the blue hyperlink has a contrast of 5.5:1 to the white background, and 3.8:1 against the surrounding black text. When focused the hyperlink's darker blue text color has a contrast of 10.8:1 to the background. However, the difference of contrast to the link color in its unfocused state is only 2.0:1 (below 3:1, so counts as just a change in color). Further, the dark blue now only has a contrast ratio of just under 2.1:0 against the black text. For this reason, it needs the underline as an additional visual indicator.
+
+
+
+
Focus on buttons
+
A page has a row of buttons with white text on a medium blue background. When one of the buttons receives keyboard focus, its background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that a change of color is not the only indicator of focus.
+
+
+ A row of buttons that all have white text on a mid-blue background with a contrast of 5:1. The black button represents a button which has received keyboard focus. The difference of contrast between the focused and the unfocused state of the button's background color is 4.2:1.
+
+ 
+