diff --git a/understanding/21/img/contrast-text-input-custom-caret.png b/understanding/21/img/contrast-text-input-custom-caret.png new file mode 100644 index 0000000000..5f2140a9cf Binary files /dev/null and b/understanding/21/img/contrast-text-input-custom-caret.png differ diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html index ab57416b16..b441c70b8e 100644 --- a/understanding/21/non-text-contrast.html +++ b/understanding/21/non-text-contrast.html @@ -3,7 +3,6 @@ Understanding Non-text Contrast -

Understanding Non-text Contrast

@@ -231,7 +230,7 @@

User Interface Component Examples

Text input focus style - A focus indicator is required. While in this case the additional gray (#CCC) outline has an insufficient contrast of 1.6:1 against the white (#FFF) background, the cursor/caret which is displayed when the input receives focus does provide a sufficiently strong visual indication. + A focus indicator is required. While in this case the additional gray (#CCC) outline has an insufficient contrast of 1.6:1 against the white (#FFF) background, the user-agent's default cursor/caret which is displayed when the input receives focus does provide a sufficiently strong visual indication. A label with a text input with a faint gray outline and a visible cursor/caret. @@ -303,6 +302,13 @@

User Interface Component Examples

Unchecked checkbox with a thick gray additional outline as focus indication. + + Text input - subtle border and customized caret + The text input's border color (#CCC) has contrast lower than 3:1 against its adjacent white background. Additionally, the caret / cursor has been given a customized light-blue color (#00C7FD) which has a contrast lower than 3:1 against the interior white background color of the input. + + A text input with a light border and a light blue caret. + +