Update link and body colors to have a contrast ratio of 7:1 (WCAG AAA compliant), resolves #1233

Author: kailan

app/components/stats-value.module.css

@@ -14,7 +14,7 @@
 .label {
     grid-column: 1;
     grid-row: 2;
-    color: #76838a;
+    color: light-dark(#545454, #adc0cd);
     font-size: var(--space-s);
     font-weight: normal;
     line-height: 1.6;
@@ -27,5 +27,5 @@
     height: var(--space-l-xl);
     margin-left: var(--space-s);
     margin-top: var(--space-3xs);
-    color: #76838a;
+    color: light-dark(#545454, #adc0cd);
 }

app/styles/application.module.css

@@ -38,13 +38,13 @@
         "Courier New", monospace;
 
     --main-color: light-dark(#383838, #f9f7ec);
-    --main-color-light: light-dark(#858585, #a6a6a6);
+    --main-color-light: light-dark(#585858, #a6a6a6);
     --main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
     --main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
     --main-bg-dark: light-dark(#edebdd, #141413);
     --gray-border: light-dark(#d5d3cb, #666561);
-    --link-color: rgb(0, 172, 91);
-    --link-hover-color: #007940;
+    --link-color: light-dark(#006133, #04da75);
+    --link-hover-color: light-dark(#01391f, #00f27f);
 
     --placeholder-bg: hsl(212, 7%, 57%);
     --placeholder-bg2: hsl(213, 16%, 75%);

app/styles/categories.module.css

@@ -15,6 +15,11 @@
 
     > * {
         padding: var(--space-s);
+        display: block;
+    }
+
+    > *:hover {
+        background-color: var(--main-bg);
     }
 
     > * + * {
@@ -32,4 +37,8 @@
 	margin: var(--space-2xs) 0;
 	text-align: center;
 	font-size: 85%;
+
+    > a {
+        text-decoration: underline;
+    }
 }

app/templates/categories.hbs

@@ -21,19 +21,19 @@
 
 <div local-class="list">
   {{#each this.model as |category|}}
-    <div local-class='row' data-test-category={{category.slug}}>
+    <LinkTo @route="category" @model={{category.slug}} data-test-category={{category.slug}} local-class='row'>
       <div>
-        <LinkTo @route="category" @model={{category.slug}} local-class="category-link">
+        <span>
           {{~category.category~}}
-        </LinkTo>
+        </span>
         <span class="text--small" data-test-crate-count>
           {{format-num category.crates_cnt}} {{if (eq category.crates_cnt 1) "crate" "crates"}}
         </span>
       </div>
       <div local-class="description" class="text--small">
         {{ category.description }}
       </div>
-    </div>
+    </LinkTo>
   {{/each}}
 </div>
 

tests/axe-config.js

@@ -1,7 +1,3 @@
 export default {
-  rules: {
-    'color-contrast': {
-      enabled: false,
-    },
-  },
+  rules: {},
 };