Accessibility: Improve Color Contrast in Dark Mode (WCAG 2.1 AA Compliance) #449

Author: Biswas-Samrat

src/app/component/activity-description/activity-description.component.css

@@ -36,16 +36,19 @@
   margin-bottom: 10px;
   color: var(--text-tertiary);
 }
+
 .activity-subheader .level {
   min-width: fit-content;
 }
+
 .activity-subheader .uuid {
   text-align: end;
 }
+
 .activity-subheader .uuid-label {
-    font-size: 12px;
-    margin-right: 0.1em;
-  }
+  font-size: 12px;
+  margin-right: 0.1em;
+}
 
 .close-button {
   flex-shrink: 0;
@@ -150,11 +153,36 @@ mat-panel-title b {
 }
 
 /* Level-based coloring for difficulty */
-.level-1 { background-color: #e8f5e8; color: #2e7d32; }  /* Light green */
-.level-2 { background-color: #e0f2e7; color: #388e3c; }  /* Medium green */
-.level-3 { background-color: #fff8e1; color: #f57c00; }  /* Light orange */
-.level-4 { background-color: #fff3e0; color: #ef6c00; }  /* Medium orange */
-.level-5 { background-color: #ffebee; color: #c62828; }  /* Light red */
+.level-1 {
+  background-color: #e8f5e8;
+  color: #2e7d32;
+}
+
+/* Light green */
+.level-2 {
+  background-color: #e0f2e7;
+  color: #388e3c;
+}
+
+/* Medium green */
+.level-3 {
+  background-color: #fff8e1;
+  color: #f57c00;
+}
+
+/* Light orange */
+.level-4 {
+  background-color: #fff3e0;
+  color: #ef6c00;
+}
+
+/* Medium orange */
+.level-5 {
+  background-color: #ffebee;
+  color: #c62828;
+}
+
+/* Light red */
 
 /* Usefulness Section Styling */
 .usefulness-section {
@@ -180,9 +208,10 @@ mat-panel-title b {
 }
 
 mat-icon.mat-icon {
-    width: fit-content;
-    height: fit-content;
+  width: fit-content;
+  height: fit-content;
 }
+
 .usefulness-stars {
   display: flex;
   align-items: center;
@@ -322,35 +351,35 @@ mat-icon.mat-icon {
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
   }
-  
+
   .references-summary {
     /* flex-wrap: wrap; */
     gap: 10px;
   }
-  
+
   .ref-section {
     flex: 0 1 48%;
   }
-  
+
 }
 
 @media (max-width: 350px) {
   .references-grid {
     grid-template-columns: 1fr;
     gap: 10px;
   }
-  
+
   .references-summary {
     flex-direction: column;
     gap: 8px;
   }
-  
+
   .ref-section {
     flex: 1;
     flex-direction: row;
     gap: 8px;
   }
-  
+
   .ref-section strong {
     min-width: 80px;
     flex-shrink: 0;
@@ -436,12 +465,47 @@ mat-icon.mat-icon {
   transition: background-color 0.2s, transform 0.1s;
 }
 
+
+
+/* 1. Light Mode (Default) */
+.level,
+.uuid {
+  color: rgb(64, 64, 64) !important;
+}
+
+/* 2. Dark Mode (When .dark-theme is active on body) */
+:host-context(body.dark-theme) .level,
+:host-context(body.dark-theme) .uuid {
+  color: rgb(224, 224, 224) !important;
+}
+
+
 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
+
   /* Level badges in dark mode - maintain readability */
-  .level-1 { background-color: #2e7d32; color: #e8f5e8; }
-  .level-2 { background-color: #388e3c; color: #e0f2e7; }
-  .level-3 { background-color: #f57c00; color: #fff8e1; }
-  .level-4 { background-color: #ef6c00; color: #fff3e0; }
-  .level-5 { background-color: #c62828; color: #ffebee; }
+  .level-1 {
+    background-color: #2e7d32;
+    color: #e8f5e8;
+  }
+
+  .level-2 {
+    background-color: #388e3c;
+    color: #e0f2e7;
+  }
+
+  .level-3 {
+    background-color: #f57c00;
+    color: #fff8e1;
+  }
+
+  .level-4 {
+    background-color: #ef6c00;
+    color: #fff3e0;
+  }
+
+  .level-5 {
+    background-color: #c62828;
+    color: #ffebee;
+  }
 }