a11y contrast requirements

theRealKLH · Dec 5, 2024 · 4a92672 · 4a92672
1 parent fda8fc0
commit 4a92672
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
@@ -478,9 +478,10 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   --dialog-error-color: #{$red};
 
   /** Banner */
-  --banner-warning-background: #{$yellow-700};
+  --banner-warning-background: #{$yellow-100};
   --banner-warning-text-color: var(--text-color);
-  --banner-warning-link-color: #{$blue-700};
+  --banner-warning-link-color: #{$blue};
+  --banner-warning-icon-color: #{darken($yellow-700, 10%)};
 
   /** File warning */
   --file-warning-background-color: #{$yellow-100};

diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss
@@ -377,9 +377,10 @@ body.theme-dark {
   --dialog-error-color: #{$red-600};
 
   /** Banner */
-  --banner-warning-background: #{darken($orange-900, 20%)};
+  --banner-warning-background: #{rgba($yellow-900, 0.4)};
   --banner-warning-text-color: var(--text-color);
-  --banner-warning-link-color: #4285fb;
+  --banner-warning-link-color: #78a8fc;
+  --banner-warning-icon-color: #{$yellow-700};
 
   /** File warning */
   --file-warning-background-color: #{rgba($yellow-900, 0.4)};

diff --git a/app/styles/ui/banners/_update-available.scss b/app/styles/ui/banners/_update-available.scss
@@ -2,6 +2,7 @@
   .download-icon,
   .warning-icon {
     margin-right: var(--spacing);
+    color: var(--banner-warning-icon-color);
   }
 
   .banner-emoji {