Merge pull request #11807 from Turbo87/wcag

Improve WCAG AAA compliance

Author: Turbo87

app/app.css

@@ -56,8 +56,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(#00ac5b, #04da75);
+        --link-hover-color: light-dark(#007940, #00f27f);
 
         --placeholder-bg: hsl(212, 7%, 57%);
         --placeholder-bg2: hsl(213, 16%, 75%);

app/components/pagination.css

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 90%;
+    font-size: 110%;
     margin-bottom: var(--space-xs);
 
     :global(ol) {
@@ -21,7 +21,7 @@
     :global(a):hover { background-color: var(--main-bg-dark); }
     :global(a.active) { background-color: var(--main-bg-dark); }
 
-    :global(img), :global(svg) { vertical-align: middle; }
+    :global(img), :global(svg) { vertical-align: middle; width: 2em; height: 2em; }
 
     .prev, .next {
         :global(circle) {

app/components/stats-value.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);
 }