Merge pull request #418 from maykinmedia/fix/797-contrast

[#797, #800] Fixed contrast issues
maykinmedia · Jan 11, 2023 · 22fea17 · 22fea17
2 parents 3fe5a86 + d4e020a
commit 22fea17
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/open_inwoner/scss/components/Header/Breadcrumbs.scss b/src/open_inwoner/scss/components/Header/Breadcrumbs.scss
@@ -1,5 +1,5 @@
 .breadcrumbs {
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: white;
   overflow-x: auto;
   $hm: max(calc((100vw - var(--container-width)) / 2), var(--spacing-large));
   padding: 0 $hm;

diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -139,15 +139,17 @@
   --color-success-lighter: hsl(
     var(--color-success-h),
     var(--color-success-s),
-    calc(var(--color-success-l) + 50%)
+    // this was +50% but +57% is needed for 4.5:1 contrast
+    calc(var(--color-success-l) + 57%)
   );
 
   --color-font-primary: var(--color-white);
   --color-font-secondary: var(--color-white);
   --color-font-accent: var(--color-gray-dark);
 
   --color-body: var(--color-gray-dark);
-  --color-mute: var(--color-gray);
+  // changed to #949494 to get the required 3:1 contrast ratio
+  --color-mute: #949494;
 
   /// Font.