From b860c6ec17ebd59cd8c6f2b7433b19266fbd5644 Mon Sep 17 00:00:00 2001
From: Ella E <ella.estigoy@gmail.com>
Date: Fri, 29 Sep 2023 10:03:08 -0600
Subject: [PATCH] A11Y: Improve contrast on the WCAG color schemes (#23692)

A11Y: Improve contrast on WCAG color palette

---------

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
---
 app/assets/stylesheets/wcag.scss | 126 ++++++++++++++++++++++++++++++-
 app/models/color_scheme.rb       |   6 +-
 2 files changed, 128 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/wcag.scss b/app/assets/stylesheets/wcag.scss
index b487416d5dd..d2452a6496c 100644
--- a/app/assets/stylesheets/wcag.scss
+++ b/app/assets/stylesheets/wcag.scss
@@ -7,6 +7,10 @@
   opacity: 1;
 }
 
+:root {
+  --bronze: #d38f42 !important;
+}
+
 html.discourse-no-touch {
   .btn-default:not(.btn-flat, .btn-danger, .btn-primary),
   .btn-icon:not(.btn-flat, .btn-danger, .btn-primary) {
@@ -139,6 +143,14 @@ html {
     box-shadow: 0 0 0 2px var(--tertiary);
   }
 
+  .topic-list .topic-list-item-separator .topic-list-data span {
+    color: var(--danger);
+  }
+
+  .discourse-tag.box {
+    background: var(--primary-very-low);
+  }
+
   // Posts
 
   .discourse-no-touch .topic-body .actions .fade-out {
@@ -280,7 +292,66 @@ html {
     color: var(--primary-medium);
   }
 
-  // Admin
+  .alert.alert-success a {
+    color: var(--primary);
+    text-decoration: underline;
+  }
+
+  .latest-topic-list .table-heading,
+  .top-topic-list .table-heading {
+    color: var(--primary-medium);
+  }
+
+  .latest-topic-list-item .topic-last-activity a,
+  .category-list .featured-topic a.last-posted-at,
+  .category-list .featured-topic a.last-posted-at:visited {
+    color: var(--primary-high-or-secondary-low);
+  }
+
+  .category-boxes .description {
+    color: var(--primary-med-or-secondary-med);
+  }
+
+  // User Preferences
+  .user-menu.revamped .quick-access-panel li.unread,
+  .user-menu.revamped .quick-access-panel li.pending {
+    background-color: var(--tertiary-very-low);
+  }
+
+  .user-main .deleted-posts {
+    color: var(--primary);
+  }
+
+  .user-main .flagged-posts {
+    color: dark-light-choose($primary, $secondary);
+  }
+
+  .uploaded-image-preview
+    .image-upload-controls
+    .image-uploader-lightbox-btn
+    .d-icon {
+    color: var(--primary);
+  }
+
+  .settings .setting .setting-value .uploaded-image-preview {
+    background-color: var(--primary-very-low);
+  }
+
+  // Notifications
+
+  .user-menu.revamped .tabs-list .btn .badge-notification {
+    background-color: dark-light-choose($tertiary-high, $tertiary);
+  }
+
+  .user-stream .notification.unread {
+    background-color: var(--tertiary-very-low);
+  }
+
+  .user-stream .time {
+    color: var(--primary-very-high);
+  }
+
+  // Admin Settings
 
   .admin-controls {
     .nav-pills > li > a:not(.active):hover {
@@ -293,6 +364,59 @@ html {
   .d-editor-preview mark {
     background-color: yellow; // resets to browser default
   }
+
+  .settings .setting.overridden h3:before {
+    background-color: var(--tertiary);
+  }
+
+  .admin-controls .controls {
+    background: var(--primary-very-low);
+  }
+
+  // Dashboard
+
+  .user-metrics .table-cell.user-basic .label,
+  .user-metrics .table-cell.user-member .label,
+  .user-metrics .table-cell.user-leader .label {
+    color: dark-light-choose($primary, $secondary);
+  }
+
+  .admin-contents.admin-plugins td.version .commit-hash {
+    color: var(--primary-medium);
+  }
+
+  // Search
+
+  .search-container
+    .search-filters
+    details.search-advanced-additional-options
+    > summary {
+    color: var(--highlight-high);
+  }
+
+  .chat-notices__notice,
+  .chat-notices .chat-retention-reminder {
+    background-color: var(--tertiary-very-low);
+  }
+
+  // Review
+
+  .reviewable-item .reviewable-meta-data .created-at a {
+    color: var(--primary-medium);
+  }
+
+  .reviewable-item {
+    background: dark-light-choose($primary-very-low, $secondary-very-high);
+  }
+
+  .reviewable .status span.approved {
+    color: var(--success-hover);
+  }
+
+  // Chat
+  .chat-channel .open-drawer-btn {
+    color: var(--primary-medium);
+  }
 }
 
 // chat
diff --git a/app/models/color_scheme.rb b/app/models/color_scheme.rb
index 00fdcbeb7cd..75640e2d95b 100644
--- a/app/models/color_scheme.rb
+++ b/app/models/color_scheme.rb
@@ -113,7 +113,7 @@ class ColorScheme < ActiveRecord::Base
       "primary-medium" => "696969",
       "primary-low-mid" => "909090",
       "secondary" => "ffffff",
-      "tertiary" => "3369FF",
+      "tertiary" => "0033CC",
       "quaternary" => "3369FF",
       "header_background" => "ffffff",
       "header_primary" => "000000",
@@ -139,8 +139,8 @@ class ColorScheme < ActiveRecord::Base
       "highlight" => "3369FF",
       "selected" => "0d2569",
       "hover" => "002382",
-      "danger" => "BB1122",
-      "success" => "3d854d",
+      "danger" => "FF697A",
+      "success" => "70B880",
       "love" => "9D256B",
     },
     # By @zenorocha