From 3f974c40bc6afbc33829b54783e8ea764feb4750 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Aug 2025 13:20:26 -0700 Subject: [PATCH 1/4] initial commit of input with light-blue caret --- .../21/img/contrast-text-input-custom-caret.png | Bin 0 -> 1854 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 understanding/21/img/contrast-text-input-custom-caret.png 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 0000000000000000000000000000000000000000..ea19ec658b357223332f7f359219a016d7dfd94b GIT binary patch literal 1854 zcmeAS@N?(olHy`uVBq!ia0y~yV0s5+S8*@_$$W9ghd_$4ILO_JVcj{Imq3n7YJ_K+ zuP=iZkj=rs*q+J20#X9RQb5eWz`THwff-0Mg2Wau!DN}Nr z{~oqyV&M=_aA2$FbNP~bv!l?>=hzh2IOv`)OzA*VX7z$0&S~meh1-P1#(LN9s)b0u>|PGy^h}@oGixRWxMJgf}QWMt3h+}y#>D^ zoUIL-!Lj>4fWsQ-f+?Q)7yg1d3!)B8S-CF00_?a6dI_hNn7^n4a{_b|PK8|8w*iNb zhqyuNCFv4-FlPlYs#m=hp9l8A5}*%8y)zm+!#J@WxL&_xf4u(xkDKBqL&_V40)Y=J z&oCZwhURHcV2;WHo15#e801Hpg+?`V)8Z9_x7_kfRLkk#{M)my% zx8z0#d2NRlGR~|uTE<%u0)G!89YS9O74pyPtVlEENpt{S`)z4*}Q$iB} DoJCf} literal 0 HcmV?d00001 From c850e048ddf3d97c55e2dd1762cf881974d4715b Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Aug 2025 13:20:41 -0700 Subject: [PATCH 2/4] update to add custom caret failure example --- understanding/21/non-text-contrast.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html index ab57416b16..6fed549a9b 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 with the interior white color of the input. + + A text input with a light border and a light blue caret. + + From ca60814c6dd18a406aae839ce3df9942857fb89c Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Aug 2025 13:25:43 -0700 Subject: [PATCH 3/4] tweak wording --- understanding/21/non-text-contrast.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html index 6fed549a9b..b441c70b8e 100644 --- a/understanding/21/non-text-contrast.html +++ b/understanding/21/non-text-contrast.html @@ -304,7 +304,7 @@

User Interface Component Examples

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 with the interior white color of the input. + 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. From fb1d973a775e32d54433a6b37d6e90415d7b6961 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 8 Aug 2025 13:38:21 -0700 Subject: [PATCH 4/4] add text label to image --- .../img/contrast-text-input-custom-caret.png | Bin 1854 -> 6256 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/understanding/21/img/contrast-text-input-custom-caret.png b/understanding/21/img/contrast-text-input-custom-caret.png index ea19ec658b357223332f7f359219a016d7dfd94b..5f2140a9cfb55ad4894d6db9986607b87cf999a0 100644 GIT binary patch literal 6256 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 DoJCf}