w3c
diff --git a/‎understanding/21/img/contrast-text-input-custom-caret.png‎
6.11 KB b/‎understanding/21/img/contrast-text-input-custom-caret.png‎
6.11 KB
diff --git a/‎understanding/21/non-text-contrast.html‎
Lines changed: 8 additions & 2 deletions b/‎understanding/21/non-text-contrast.html‎
Lines changed: 8 additions & 2 deletions
@@ -3,7 +3,6 @@
 	<head>
 		<meta charset="UTF-8">
 		<title>Understanding Non-text Contrast</title>
-		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
 	</head>
 	<body>
 		<h1>Understanding Non-text Contrast</h1>
@@ -231,7 +230,7 @@ <h3>User Interface Component Examples</h3>
 						</tr>
 						<tr>
 							<th>Text input focus style</th>
-							<td>A focus indicator is required. While in this case the additional gray (<code>#CCC</code>) outline has an insufficient contrast of 1.6:1 against the white (<code>#FFF</code>) background, the cursor/caret which is displayed when the input receives focus <em>does</em> provide a sufficiently strong visual indication.</td>
+							<td>A focus indicator is required. While in this case the additional gray (<code>#CCC</code>) outline has an insufficient contrast of 1.6:1 against the white (<code>#FFF</code>) background, the user-agent's default cursor/caret which is displayed when the input receives focus <em>does</em> provide a sufficiently strong visual indication.</td>
 							<td>
 								<img src="img/text-input-focus.png" alt="A label with a text input with a faint gray outline and a visible cursor/caret.">
 							</td>
@@ -303,6 +302,13 @@ <h3>User Interface Component Examples</h3>
 								<img src="img/checkbox-example5.png" alt="Unchecked checkbox with a thick gray additional outline as focus indication." width="150">
 							</td>
 						</tr>
+						<tr>
+							<th>Text input - subtle border and customized caret</th>
+							<td>The text input's border color (<code>#CCC</code>) has contrast lower than 3:1 against its adjacent white background. Additionally, the caret / cursor has been given a customized light-blue color (<code>#00C7FD</code>) which has a contrast lower than 3:1 against the interior white background color of the input.</td>
+							<td>
+								<img src="img/contrast-text-input-custom-caret.png" alt="A text input with a light gray border and a light blue caret." width="375">
+							</td>
+						</tr>
 					</table>
 
 				</section>