From 8620cbdab83392ad4b55a7d2607dd23a6e803c7a Mon Sep 17 00:00:00 2001
From: Pranjali <pranjalisr25@gmail.com>
Date: Mon, 13 Apr 2026 01:06:57 +0530
Subject: [PATCH 1/3] fix(a11y): improved contrast

---
 src/components/Footer/Footer.jsx         | 11 ++++-------
 src/components/Markdown/Markdown.css     |  9 +++++++++
 src/components/Navigation/Navigation.jsx |  2 +-
 src/styles/theme.css                     |  4 ++--
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 4f2cf373a226..f98b4baaf32d 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -10,7 +10,7 @@ const footerLinkClasses =
 
 const Footer = () => (
   <footer className="w-full flex-[0_0_auto] print:hidden">
-    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center">
+    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#465E69] [&_a:hover]:text-[#2B3A42] dark:[&_a]:text-[#8dd6f9] dark:[&_a:hover]:text-white">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">
           <img
@@ -20,7 +20,7 @@ const Footer = () => (
           />
         </a>
       </div>
-      <p className="mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0] [&_a]:text-[#3b7eb5] [&_a:hover]:!text-[#144f80] dark:[&_a:hover]:!text-[#82b7f6]">
+      <p className="mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
         Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and
         webpack contributors. All rights reserved. The{" "}
         <a href="https://openjsf.org">OpenJS Foundation</a> has registered
@@ -36,12 +36,9 @@ const Footer = () => (
         holders. Use of them does not imply any affiliation with or endorsement
         by them.
       </p>
-      <p className="mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0] [&_a]:text-[#3b7eb5] [&_a:hover]:!text-[#144f80] dark:[&_a:hover]:!text-[#82b7f6]">
+      <p className="mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
         <a href="https://openjsf.org">The OpenJS Foundation</a> |{" "}
-        <a href="https://ai-coding-assistants-policy.openjsf.org/">
-          AI Coding Assistants Policy
-        </a>{" "}
-        | <a href="https://terms-of-use.openjsf.org">Terms of Use</a> |{" "}
+        <a href="https://terms-of-use.openjsf.org">Terms of Use</a> |{" "}
         <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> |{" "}
         <a href="https://bylaws.openjsf.org">Bylaws</a> |{" "}
         <a href="https://code-of-conduct.openjsf.org">Code of Conduct</a> |{" "}
diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index f722300c6225..7856f666395d 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -293,6 +293,7 @@
     font-family:
       "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     @apply text-[90%] mx-0.5 py-0.5 px-1.5 whitespace-normal bg-[rgba(70,94,105,0.05)] rounded-[3px];
+    color: #2b3a42;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
   }
 
@@ -455,3 +456,11 @@
 .dark .markdown aside.todo > .todo__prefix {
   @apply text-white;
 }
+
+.markdown aside.tip a {
+  color: #465e69;
+}
+
+.markdown aside.tip a:hover {
+  color: #2b3a42;
+}
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 25ad35661c5f..ff7e24735e84 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -248,7 +248,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
                 >
                   {link.children.map((child) => {
                     const classNames =
-                      "text-blue-400 dark:text-[#69a8ee] py-5 text-sm capitalize hover:text-black dark:hover:text-white";
+                      "text-[#465E69] dark:text-[#8dd6f9] py-5 text-sm capitalize hover:text-[#2B3A42] dark:hover:text-white";
                     const isActive = location.pathname.startsWith(child.url);
                     return (
                       <NavLink
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 58b53a6b9b46..4686abbc5aac 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -15,7 +15,7 @@
   /* Aside/callout colors */
   --color-aside-border: #dddddd;
   --color-aside-tip-bg: #eaf8ff;
-  --color-aside-tip-text: #4e7182;
+  --color-aside-tip-text: #465e69;
   --color-aside-tip-border: #1eb4ff;
   --color-aside-warning-bg: #fdf5d8;
   --color-aside-warning-text: #716b53;
@@ -82,7 +82,7 @@
   --color-heading-dark: #32434a;
   --color-aside-border: #dddddd;
   --color-aside-tip-bg: #eaf8ff;
-  --color-aside-tip-text: #4e7182;
+  --color-aside-tip-text: #465e69;
   --color-aside-tip-border: #1eb4ff;
   --color-aside-warning-bg: #fdf5d8;
   --color-aside-warning-text: #716b53;

From 0f91e00f5a73f9a632224f1542c13b173a33eb0f Mon Sep 17 00:00:00 2001
From: Pranjali <pranjalisr25@gmail.com>
Date: Fri, 17 Apr 2026 15:19:55 +0530
Subject: [PATCH 2/3] fix: colors

---
 src/components/Footer/Footer.jsx         |  2 +-
 src/components/Markdown/Markdown.css     | 32 +++++++++++++++++++++---
 src/components/Navigation/Navigation.jsx |  2 +-
 src/styles/theme.css                     |  6 +++++
 4 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index f98b4baaf32d..d2ad336dd62a 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -10,7 +10,7 @@ const footerLinkClasses =
 
 const Footer = () => (
   <footer className="w-full flex-[0_0_auto] print:hidden">
-    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#465E69] [&_a:hover]:text-[#2B3A42] dark:[&_a]:text-[#8dd6f9] dark:[&_a:hover]:text-white">
+    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[var(--color-link-accessible)] [&_a:hover]:text-[var(--color-link-accessible-hover)] dark:[&_a]:text-[var(--color-link-accessible-dark)] dark:[&_a:hover]:text-white">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">
           <img
diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index 7856f666395d..a36f5a8b67c6 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -293,8 +293,8 @@
     font-family:
       "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     @apply text-[90%] mx-0.5 py-0.5 px-1.5 whitespace-normal bg-[rgba(70,94,105,0.05)] rounded-[3px];
-    color: #2b3a42;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+    color: var(--color-code-inline-text);
+    text-shadow: none;
   }
 
   a {
@@ -457,10 +457,34 @@
   @apply text-white;
 }
 
+.markdown a > code,
+.markdown a > tt {
+  color: var(--color-link-accessible) !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  text-shadow: none !important;
+}
+
+.dark .markdown a > code,
+.dark .markdown a > tt {
+  color: var(--color-link-accessible-dark) !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  text-shadow: none !important;
+}
+
 .markdown aside.tip a {
-  color: #465e69;
+  color: var(--color-link-accessible) !important;
 }
 
 .markdown aside.tip a:hover {
-  color: #2b3a42;
+  color: var(--color-link-accessible-hover) !important;
+}
+
+.dark .markdown aside.tip a {
+  color: var(--color-link-accessible-dark) !important;
 }
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index ff7e24735e84..309080bb77ee 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -248,7 +248,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
                 >
                   {link.children.map((child) => {
                     const classNames =
-                      "text-[#465E69] dark:text-[#8dd6f9] py-5 text-sm capitalize hover:text-[#2B3A42] dark:hover:text-white";
+                      "text-[var(--color-link-accessible)] dark:text-[var(--color-link-accessible-dark)] py-5 text-sm capitalize hover:text-[var(--color-link-accessible-hover)] dark:hover:text-white";
                     const isActive = location.pathname.startsWith(child.url);
                     return (
                       <NavLink
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 4686abbc5aac..47b8f84671bf 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -4,6 +4,9 @@
   --color-brand-link-hover: #144f80;
   --color-brand-link-dark: #69a8ee;
   --color-brand-link-dark-hover: #82b7f6;
+  /* Accessible link colors (a11y fix) */
+  --color-link-accessible: #144f80;
+  --color-link-accessible-hover: #144f80;
 
   /* Brand button/UI blue */
   --color-brand-blue: #175d96;
@@ -37,6 +40,7 @@
   --color-code-link: #1e78c2;
   --color-code-link-hover: #2186d8;
   --color-code-anchor-border: #175d96;
+  --color-code-inline-text: #144f80;
 
   /* Dark mode surface colors */
   --color-dark-bg: #121212;
@@ -61,6 +65,8 @@
   --color-dark-section-border: #343434;
   --color-dark-sidebar-text: #cadbe6;
   --color-dark-active-text: #465e69;
+  --color-link-accessible-dark: #8dd6f9;
+  --color-dark-code-inline-text: #e2e8f0;
 
   /* Sidebar/nav */
   --color-nav-bg: #526b78;

From 439d898f5c722b4656c8417b9c825fd8e861cbc2 Mon Sep 17 00:00:00 2001
From: Pranjali <pranjalisr25@gmail.com>
Date: Mon, 27 Apr 2026 16:06:30 +0530
Subject: [PATCH 3/3] fix(a11y): removed important

---
 src/components/Markdown/Markdown.css | 50 ++++++++++++++++------------
 src/styles/theme.css                 |  2 +-
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index a36f5a8b67c6..3c0676f22c21 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -457,34 +457,40 @@
   @apply text-white;
 }
 
-.markdown a > code,
-.markdown a > tt {
-  color: var(--color-link-accessible) !important;
-  background: transparent !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-  text-shadow: none !important;
+.markdown aside.tip p a,
+.markdown aside.tip li a {
+  @apply text-link-accessible;
 }
 
-.dark .markdown a > code,
-.dark .markdown a > tt {
-  color: var(--color-link-accessible-dark) !important;
-  background: transparent !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-  text-shadow: none !important;
+.markdown aside.tip p a:hover,
+.markdown aside.tip li a:hover {
+  @apply text-link-accessible-hover;
 }
 
-.markdown aside.tip a {
-  color: var(--color-link-accessible) !important;
+.dark .markdown aside.tip p a,
+.dark .markdown aside.tip li a {
+  @apply text-link-accessible-dark;
 }
 
-.markdown aside.tip a:hover {
-  color: var(--color-link-accessible-hover) !important;
+.markdown p a > code,
+.markdown li a > code,
+.markdown aside a > code,
+.markdown p a > tt,
+.markdown li a > tt,
+.markdown aside a > tt {
+  @apply text-link-accessible;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  text-shadow: none;
 }
 
-.dark .markdown aside.tip a {
-  color: var(--color-link-accessible-dark) !important;
+.dark .markdown p a > code,
+.dark .markdown li a > code,
+.dark .markdown aside a > code,
+.dark .markdown p a > tt,
+.dark .markdown li a > tt,
+.dark .markdown aside a > tt {
+  @apply text-link-accessible-dark;
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 47b8f84671bf..ba049aedc635 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -5,7 +5,7 @@
   --color-brand-link-dark: #69a8ee;
   --color-brand-link-dark-hover: #82b7f6;
   /* Accessible link colors (a11y fix) */
-  --color-link-accessible: #144f80;
+  --color-link-accessible: #175d96;
   --color-link-accessible-hover: #144f80;
 
   /* Brand button/UI blue */