Merge pull request #896 from ibrand/863

Change all grays on the page to abide by color contrast accessibility…

Author: outoftime

src/css/application.css

@@ -59,9 +59,10 @@
 }
 
 :root {
-  --color-gray: #eee;
-  --color-dark-gray: #aaa;
-  --color-very-dark-gray: #333;
+  --color-low-contrast-gray: #eee;
+  --color-light-gray: #aaa;
+  --color-gray: #666;
+  --color-dark-gray: #444;
   --color-green: #00ff85;
   --color-yellow: #ffd100;
   --color-red: #ff5e4f;
@@ -89,8 +90,8 @@ body {
 }
 
 .layout__instructions-bar {
-  background-color: var(--color-very-dark-gray);
-  border-right: 1px solid var(--color-gray);
+  background-color: var(--color-dark-gray);
+  border-right: 1px solid var(--color-low-contrast-gray);
   color: white;
   cursor: pointer;
   display: flex;
@@ -147,7 +148,7 @@ body {
 }
 
 .top-bar__snapshot_in-progress {
-  color: var(--color-dark-gray);
+  color: var(--color-light-gray);
   cursor: progress;
 }
 
@@ -178,16 +179,16 @@ body {
 
 .top-bar__menu-button_active {
   background-color: white;
-  border-color: var(--color-gray);
+  border-color: var(--color-low-contrast-gray);
 }
 
 .top-bar__hamburger {
   font-size: 2em;
 }
 
 .top-bar__menu {
-  border: 1px solid var(--color-gray);
-  box-shadow: 2px 2px 2px var(--color-gray);
+  border: 1px solid var(--color-low-contrast-gray);
+  box-shadow: 2px 2px 2px var(--color-low-contrast-gray);
   left: -1px;
   position: absolute;
   top: 100%;
@@ -200,7 +201,7 @@ body {
 .top-bar__menu-item {
   background-color: white;
   box-sizing: border-box;
-  color: var(--color-very-dark-gray);
+  color: var(--color-dark-gray);
   display: block;
   font-weight: normal;
   line-height: 1.2em;
@@ -218,7 +219,7 @@ body {
 
 .top-bar__menu-item:hover,
 .top-bar__menu-item_active {
-  background-color: var(--color-gray);
+  background-color: var(--color-low-contrast-gray);
   color: black;
 }
 
@@ -242,7 +243,7 @@ body {
 /** @define instructions */
 
 .instructions {
-  background-color: var(--color-gray);
+  background-color: var(--color-low-contrast-gray);
   color: black;
   overflow: scroll;
   padding: 1rem;
@@ -314,13 +315,13 @@ body {
 }
 
 .editors__collapsed-editor {
-  border-top: 4px solid var(--color-dark-gray);
+  border-top: 4px solid var(--color-light-gray);
   flex: none;
 }
 
 .editors__label {
-  background-color: var(--color-gray);
-  color: var(--color-very-dark-gray);
+  background-color: var(--color-low-contrast-gray);
+  color: var(--color-dark-gray);
   cursor: pointer;
   font-family: 'Roboto';
   font-size: 14px;
@@ -338,13 +339,13 @@ body {
 }
 
 .editors__column-divider {
-  background-color: var(--color-dark-gray);
+  background-color: var(--color-light-gray);
   cursor: ew-resize;
   min-width: 4px;
 }
 
 .editors__row-divider {
-  background-color: var(--color-dark-gray);
+  background-color: var(--color-light-gray);
   cursor: ns-resize;
   min-height: 4px;
 }
@@ -357,7 +358,7 @@ body {
   top: 50%;
   left: 50%;
   margin: -1rem 0 0 -5.5rem;
-  opacity: 0.4;
+  color: var(--color-gray);
   font-family: Roboto;
   user-select: none;
   pointer-events: none;
@@ -421,7 +422,7 @@ body {
   font-weight: bold;
   line-height: 1.5em;
   vertical-align: middle;
-  background-color: var(--color-gray);
+  background-color: var(--color-low-contrast-gray);
   z-index: 2;
 }
 
@@ -451,7 +452,7 @@ body {
 
 .error-list_docked {
   overflow: scroll;
-  border-top: 3px solid var(--color-gray);
+  border-top: 3px solid var(--color-low-contrast-gray);
 }
 
 .error-list__header {
@@ -464,7 +465,7 @@ body {
   list-style-type: none;
   margin: 0;
   padding: 0.5rem 1rem;
-  background-color: var(--color-gray);
+  background-color: var(--color-low-contrast-gray);
 }
 
 .error-list__error {
@@ -537,7 +538,7 @@ body {
   text-transform: uppercase;
   font-size: 1.5vw;
   padding-left: 1em;
-  color: var(--color-dark-gray);
+  color: var(--color-low-contrast-gray);
 }
 
 .pop-throbber__image {
@@ -546,7 +547,7 @@ body {
 }
 
 .pop-throbber path {
-  fill: var(--color-gray) !important;
+  fill: var(--color-low-contrast-gray) !important;
 }
 
 /** @define utilities */