fix: improve contrast for input elements

jbdietrich · jbdietrich · commit e73ddc87811f · 2022-11-28T16:02:24.000+01:00
According to A11y best practices input elements should have a
contrast ratio of at least 3:1 with surrounding elements.

After this change, the border color of many input elements changes
from #ddd to #87929D. The latter has a contrast ratio of &gt; 3 with
the theme's default background color: #fff.
diff --git a/style.css b/style.css
@@ -270,7 +270,7 @@ select {
   -moz-appearance: none;
   background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
   background-position: right 10px center;
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   border-radius: 4px;
   padding: 8px 30px 8px 10px;
   outline: none;
@@ -287,7 +287,7 @@ select::-ms-expand {
 }
 
 textarea {
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   border-radius: 2px;
   resize: vertical;
   width: 100%;
@@ -428,7 +428,7 @@ ul {
 
 .button-secondary {
   color: lighten($text_color, 20%);
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   background-color: transparent;
 }
 
@@ -438,7 +438,7 @@ ul {
 
 .button-secondary:hover, .button-secondary:focus, .button-secondary:active {
   color: $text_color;
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   background-color: darken($background_color, 3%);
 }
 
@@ -565,7 +565,7 @@ ul {
 }
 
 .form-field input {
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   border-radius: 4px;
   padding: 10px;
   width: 100%;
@@ -576,7 +576,7 @@ ul {
 }
 
 .form-field input[type="text"] {
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   border-radius: 4px;
 }
 
@@ -1090,7 +1090,7 @@ ul {
 }
 
 .search {
-  border-color: #ddd;
+  border-color: #87929D;
   border-radius: 30px;
   border-style: solid;
   border-width: 1px;
@@ -2036,7 +2036,7 @@ ul {
 }
 
 .article-return-to-top {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #87929D;
 }
 
 @media (min-width: 1024px) {
diff --git a/styles/_article.scss b/styles/_article.scss
@@ -117,8 +117,8 @@
       height: auto;
     }
 
-    border-bottom: 1px solid $border-color;
-    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
     flex: 1 0 auto; //Explicit values needed whith flex-direction: column for IE11
     margin-bottom: 20px;
     padding: 0;
@@ -129,7 +129,7 @@
       flex-direction: row;
     }
 
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     display: flex;
     flex-direction: column;
     padding: 20px 0;
@@ -151,7 +151,7 @@
   }
 
   &-votes {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     padding: 30px 0;
     text-align: center;
   }
@@ -173,7 +173,7 @@
       display: none;
     }
 
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $high-contrast-border-color;
 
     a {
       color: $text_color;
diff --git a/styles/_base.scss b/styles/_base.scss
@@ -90,7 +90,7 @@ select {
   background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A")
     no-repeat #fff;
   background-position: right 10px center;
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   border-radius: 4px;
   padding: 8px 30px 8px 10px;
   outline: none;
@@ -107,7 +107,7 @@ select {
 }
 
 textarea {
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   border-radius: 2px;
   resize: vertical;
   width: 100%;
@@ -124,7 +124,7 @@ textarea {
 }
 
 .container-divider {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $low-contrast-border-color;
   margin-bottom: 20px;
 }
 
diff --git a/styles/_blocks.scss b/styles/_blocks.scss
@@ -41,7 +41,7 @@
 
     &-internal {
       background-color: transparent;
-      border: 1px solid $border-color;
+      border: 1px solid $low-contrast-border-color;
 
       .icon-lock {
         height: 15px;
diff --git a/styles/_buttons.scss b/styles/_buttons.scss
@@ -80,7 +80,7 @@
 
 .button-secondary {
   color: $secondary-text-color;
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   background-color: transparent;
 
   &:visited {
@@ -91,7 +91,7 @@
   &:focus,
   &:active {
     color: $text_color;
-    border: 1px solid $border-color;
+    border: 1px solid $high-contrast-border-color;
     background-color: $primary-shade;
   }
 }
diff --git a/styles/_collapsible-nav.scss b/styles/_collapsible-nav.scss
@@ -14,8 +14,8 @@
     border-top: 0;
   }
 
-  border-bottom: 1px solid $border-color;
-  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $low-contrast-border-color;
+  border-top: 1px solid $low-contrast-border-color;
 }
 
 .collapsible-nav-toggle {
diff --git a/styles/_comments.scss b/styles/_comments.scss
@@ -1,7 +1,7 @@
 /***** Comments *****/
 /* Styles comments inside articles, posts and requests */
 .comment {
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $low-contrast-border-color;
   padding: 20px 0;
 
   &-heading {
@@ -12,8 +12,8 @@
   }
 
   &-overview {
-    border-bottom: 1px solid $border-color;
-    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
     padding: 20px 0;
 
     p { margin-top: 0; }
diff --git a/styles/_community.scss b/styles/_community.scss
@@ -58,7 +58,7 @@
 
 .topic-header {
   @include tablet { padding-bottom: 10px; }
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $low-contrast-border-color;
   font-size: $font-size-small;
 
   .dropdown {
@@ -70,7 +70,7 @@
     }
 
     display: block;
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     padding: 10px 0;
   }
 }
diff --git a/styles/_footer.scss b/styles/_footer.scss
@@ -1,6 +1,6 @@
 /***** Footer *****/
 .footer {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $low-contrast-border-color;
   margin-top: 60px;
   padding: 30px 0;
 
diff --git a/styles/_forms.scss b/styles/_forms.scss
@@ -15,7 +15,7 @@
 }
 
 .form-field input {
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   border-radius: 4px;
   padding: 10px;
   width: 100%;
@@ -24,7 +24,7 @@
 }
 
 .form-field input[type="text"] {
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   border-radius: 4px;
 
   &:focus { border: 1px solid $brand_color; }
@@ -89,7 +89,7 @@
   margin-top: 30px;
 
   label {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
     display: block;
     padding-bottom: 5px;
   }
diff --git a/styles/_home-page.scss b/styles/_home-page.scss
@@ -39,7 +39,7 @@
 
     a {
       display: block;
-      border-bottom: 1px solid $border-color;
+      border-bottom: 1px solid $low-contrast-border-color;
       padding: 15px 0;
     }
 
@@ -49,7 +49,7 @@
 
     &:last-child a {
       @include desktop {
-        border-bottom: 1px solid $border-color;
+        border-bottom: 1px solid $low-contrast-border-color;
       }
 
       border: 0;
@@ -76,6 +76,6 @@
 
 .community,
 .activity {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $low-contrast-border-color;
   padding: 30px 0;
 }
diff --git a/styles/_mixins.scss b/styles/_mixins.scss
@@ -102,23 +102,23 @@
 
   :not(pre) > code {
     background: $primary-shade;
-    border: 1px solid $border-color;
+    border: 1px solid $low-contrast-border-color;
     border-radius: 3px;
     padding: 0 5px;
     margin: 0 2px;
   }
 
   pre {
     background: $primary-shade;
-    border: 1px solid $border-color;
+    border: 1px solid $low-contrast-border-color;
     border-radius: 3px;
     padding: 10px 15px;
     overflow: auto;
     white-space: pre;
   }
 
   blockquote {
-    border-left: 1px solid $border-color;
+    border-left: 1px solid $low-contrast-border-color;
     color: $secondary-text-color;
     font-style: italic;
     padding: 0 15px;
diff --git a/styles/_post.scss b/styles/_post.scss
@@ -134,7 +134,7 @@
       [dir="rtl"] & { padding: 0 50px 0 0; }
     }
 
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     flex: 1;
     padding: 30px 0;
     text-align: center;
diff --git a/styles/_recent-activity.scss b/styles/_recent-activity.scss
@@ -9,7 +9,7 @@
   &-list { padding: 0; }
 
   &-item {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
     overflow: auto;
     padding: 20px 0;
   }
diff --git a/styles/_request.scss b/styles/_request.scss
@@ -45,7 +45,7 @@
 
     .comment-show-container {
       border-radius: 2px;
-      border: 1px solid $border-color;
+      border: 1px solid $low-contrast-border-color;
       color: $secondary-text-color;
       text-align: inherit;
       padding: 8px 25px;
@@ -89,7 +89,7 @@
 
   &-title {
     @include desktop {
-      border-bottom: 1px solid $border-color;
+      border-bottom: 1px solid $low-contrast-border-color;
       margin-bottom: 0;
       max-width: 66%; //Same as main container
       padding-bottom: 20px;
@@ -108,8 +108,8 @@
       width: 30%; //IE11 fix
     }
 
-    border-bottom: 1px solid $border-color;
-    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
     flex: 1 0 auto;
     order: 0; //Bring to top
 
@@ -125,7 +125,7 @@
   }
 
   &-details {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
     font-size: 0; // To remove whitespace and do a 40%/60% split
     margin: 0;
     padding-bottom: 20px;
diff --git a/styles/_search.scss b/styles/_search.scss
@@ -9,7 +9,7 @@ $padding-right: 20px;
 }
 
 .search {
-  border-color: $border-color;
+  border-color: $high-contrast-border-color;
   border-radius: 30px;
   border-style: solid;
   border-width: 1px;
diff --git a/styles/_search_results.scss b/styles/_search_results.scss
@@ -18,7 +18,7 @@
   }
 
   &-sidebar {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     flex: 1 0 auto;
     margin-bottom: 20px;
     padding: 0;
@@ -131,7 +131,7 @@
     > li {
       padding: 20px 0;
       &:first-child {
-        border-top: 1px solid $border-color;
+        border-top: 1px solid $low-contrast-border-color;
       }
 
       h2 {
diff --git a/styles/_section.scss b/styles/_section.scss
@@ -25,12 +25,12 @@
 }
 
 .section-list-item {
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $low-contrast-border-color;
   font-size: $font-size-bigger;
   padding: 15px 0;
 
   &:first-child {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
   }
 
   a {
diff --git a/styles/_striped_list.scss b/styles/_striped_list.scss
diff --git a/styles/_tables.scss b/styles/_tables.scss
diff --git a/styles/_user-profiles.scss b/styles/_user-profiles.scss
diff --git a/styles/_variables.scss b/styles/_variables.scss

Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,8 @@`
`14`	`14`	`border-top: 0;`
`15`	`15`	`}`
`16`	`16`
`17`		`- border-bottom: 1px solid $border-color;`
`18`		`- border-top: 1px solid $border-color;`
	`17`	`+ border-bottom: 1px solid $low-contrast-border-color;`
	`18`	`+ border-top: 1px solid $low-contrast-border-color;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.collapsible-nav-toggle {`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@`
`58`	`58`
`59`	`59`	`.topic-header {`
`60`	`60`	`@include tablet { padding-bottom: 10px; }`
`61`		`- border-bottom: 1px solid $border-color;`
	`61`	`+ border-bottom: 1px solid $low-contrast-border-color;`
`62`	`62`	`font-size: $font-size-small;`
`63`	`63`
`64`	`64`	`.dropdown {`
`@@ -70,7 +70,7 @@`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`display: block;`
`73`		`- border-top: 1px solid $border-color;`
	`73`	`+ border-top: 1px solid $low-contrast-border-color;`
`74`	`74`	`padding: 10px 0;`
`75`	`75`	`}`
`76`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`
`40`	`40`	`a {`
`41`	`41`	`display: block;`
`42`		`- border-bottom: 1px solid $border-color;`
	`42`	`+ border-bottom: 1px solid $low-contrast-border-color;`
`43`	`43`	`padding: 15px 0;`
`44`	`44`	`}`
`45`	`45`
`@@ -49,7 +49,7 @@`
`49`	`49`
`50`	`50`	`&:last-child a {`
`51`	`51`	`@include desktop {`
`52`		`- border-bottom: 1px solid $border-color;`
	`52`	`+ border-bottom: 1px solid $low-contrast-border-color;`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`border: 0;`
`@@ -76,6 +76,6 @@`
`76`	`76`
`77`	`77`	`.community,`
`78`	`78`	`.activity {`
`79`		`- border-top: 1px solid $border-color;`
	`79`	`+ border-top: 1px solid $low-contrast-border-color;`
`80`	`80`	`padding: 30px 0;`
`81`	`81`	`}`
Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,7 @@`
`134`	`134`	`[dir="rtl"] & { padding: 0 50px 0 0; }`
`135`	`135`	`}`
`136`	`136`
`137`		`- border-top: 1px solid $border-color;`
	`137`	`+ border-top: 1px solid $low-contrast-border-color;`
`138`	`138`	`flex: 1;`
`139`	`139`	`padding: 30px 0;`
`140`	`140`	`text-align: center;`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`&-list { padding: 0; }`
`10`	`10`
`11`	`11`	`&-item {`
`12`		`- border-bottom: 1px solid $border-color;`
	`12`	`+ border-bottom: 1px solid $low-contrast-border-color;`
`13`	`13`	`overflow: auto;`
`14`	`14`	`padding: 20px 0;`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ $padding-right: 20px;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.search {`
`12`		`- border-color: $border-color;`
	`12`	`+ border-color: $high-contrast-border-color;`
`13`	`13`	`border-radius: 30px;`
`14`	`14`	`border-style: solid;`
`15`	`15`	`border-width: 1px;`
Original file line number	Diff line number	Diff line change
`@@ -25,12 +25,12 @@`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.section-list-item {`
`28`		`- border-bottom: 1px solid $border-color;`
	`28`	`+ border-bottom: 1px solid $low-contrast-border-color;`
`29`	`29`	`font-size: $font-size-bigger;`
`30`	`30`	`padding: 15px 0;`
`31`	`31`
`32`	`32`	`&:first-child {`
`33`		`- border-top: 1px solid $border-color;`
	`33`	`+ border-top: 1px solid $low-contrast-border-color;`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`a {`