Merge pull request #83 from ravidsrk/ravidsrk/ui-ux-audit

UI/UX audit: fix muted + footer text contrast to WCAG AA

Author: ravidsrk

apps/web/functions/_brand.ts

@@ -26,13 +26,16 @@ export const BRAND_CSS = `
     /* borders + hairlines (light) */
     --border:#DBDDD6; --border-2:#E4E6DF; --row:#E7E8E2; --row-inner:#EDEEE8;
     --border-btn:#C9CBC3; --border-chip:#D7D9D2; --track:#E2E4DD; --neutral:#CDCFC8;
-    /* ink tints on light, high contrast first */
-    --text:#181815; --text-2:#3A3B33; --text-3:#46473F; --text-4:#6E6F63;
-    --text-5:#7E7F72; --text-6:#9A9B8E;
+    /* ink tints on light, high contrast first. text-4/5 darkened to clear WCAG
+       AA (4.5:1) on the paper AND the tinted code-panel backgrounds, where the
+       old values measured 3.5-3.7:1 — the slop detector's own low-contrast-text
+       axis flags that. text-6 stays as the single faint, decorative-only tone. */
+    --text:#181815; --text-2:#3A3B33; --text-3:#46473F; --text-4:#565750;
+    --text-5:#5E5F57; --text-6:#9A9B8E;
     /* verdict core hues (fills + dots) */
     --clean:#1FA85E; --mild:#D89A2E; --heavy:#C9402E;
-    /* verdict text hues (AA on paper) */
-    --clean-text:#15824A; --mild-text:#9A6B12; --heavy-text:#B23A2A;
+    /* verdict text hues — nudged to actually clear AA 4.5:1 on paper (were 4.3-4.4) */
+    --clean-text:#11703F; --mild-text:#835A0E; --heavy-text:#B23A2A;
     --system-text:#2C6E8F; --clean-dark:#3FBE7A;
     /* ink tints on the dark register */
     --d-text:#F4F5F2; --d-text-2:#C9CABF; --d-text-3:#B6B7AC; --d-text-4:#8A8B7E;

apps/web/functions/_ui.tsx

@@ -111,13 +111,13 @@ export const UI_CSS = `
   .ft-inner{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
   .ft-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
   .ft-word{font-family:var(--mono);font-weight:700;font-size:var(--fs-wordmark);letter-spacing:-0.01em;color:var(--d-text)}
-  .ft-meta{font-family:var(--mono);font-size:12px;color:var(--text-4)}
+  .ft-meta{font-family:var(--mono);font-size:12px;color:var(--d-text-4)}
   .ft-links{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}
   .ft-links a{color:var(--d-text-3)}
   .ft-links a:hover{color:var(--d-text)}
   .ft-note{max-width:1080px;margin:16px auto 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
   .ft-fp{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--d-text-3)}
-  .ft-repro{font-family:var(--mono);font-size:12px;color:var(--text-4)}
+  .ft-repro{font-family:var(--mono);font-size:12px;color:var(--d-text-4)}
 
   /* scan input — the primary action; one bordered row, no slop styling */
   .scan{display:flex;align-items:stretch;overflow:hidden;background:var(--panel);border:1px solid var(--text);border-radius:4px}

apps/web/public/compare/index.html

@@ -20,8 +20,8 @@
     color-scheme:light;
     --bg:#F4F5F2; --bg-2:#EEF0EB; --panel:#FBFBF9; --ink-deep:#16170F;
     --border:#DBDDD6; --border-2:#E4E6DF; --border-btn:#C9CBC3;
-    --text:#181815; --text-2:#3A3B33; --text-3:#46473F; --text-4:#6E6F63; --text-6:#9A9B8E;
-    --clean:#1FA85E; --clean-text:#15824A;
+    --text:#181815; --text-2:#3A3B33; --text-3:#46473F; --text-4:#565750; --text-6:#9A9B8E;
+    --clean:#1FA85E; --clean-text:#11703F;
     --d-text:#F4F5F2; --d-text-3:#B6B7AC; --d-text-4:#8A8B7E;
     --serif:'Newsreader',Georgia,'Times New Roman',serif;
     --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

apps/web/public/index.html

@@ -210,10 +210,10 @@
     --ink-deep:#16170F; --ink-deeper:#0F0F0B;
     --border:#DBDDD6; --border-2:#E4E6DF; --row:#E7E8E2; --row-inner:#EDEEE8;
     --border-btn:#C9CBC3; --border-chip:#D7D9D2; --track:#E2E4DD; --neutral:#CDCFC8;
-    --text:#181815; --text-2:#3A3B33; --text-3:#46473F; --text-4:#6E6F63;
-    --text-5:#7E7F72; --text-6:#9A9B8E;
+    --text:#181815; --text-2:#3A3B33; --text-3:#46473F; --text-4:#565750;
+    --text-5:#5E5F57; --text-6:#9A9B8E;
     --clean:#1FA85E; --mild:#D89A2E; --heavy:#C9402E;
-    --clean-text:#15824A; --mild-text:#9A6B12; --heavy-text:#B23A2A;
+    --clean-text:#11703F; --mild-text:#835A0E; --heavy-text:#B23A2A;
     --system-text:#2C6E8F; --clean-dark:#3FBE7A;
     --d-text:#F4F5F2; --d-text-2:#C9CABF; --d-text-3:#B6B7AC; --d-text-4:#8A8B7E;
     --d-border:#2A2B22; --d-border-2:#3A3B30;