From 135fffc037a800d18652a76fe2da2de0b70a63b3 Mon Sep 17 00:00:00 2001
From: huangkevin-apr <huangkevinapr@outlook.com>
Date: Sat, 10 Jan 2026 15:57:51 +0100
Subject: [PATCH] Fix WCAG AA Color Contrast Violations

Signed-off-by: huangkevin-apr <huangkevinapr@outlook.com>
---
 src/css/custom.css               |  4 +++-
 src/partials/features-zigzag.tsx | 14 +++++++-------
 src/partials/question-blocks.tsx |  6 +++---
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 550a78828..7d04b90de 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -15,6 +15,7 @@
   --github-alert-default-color: rgb(175, 184, 193);
   --github-alert-warning-color: rgb(154, 103, 0);
   --github-alert-note-color: rgb(9, 105, 218);
+  --docsearch-muted-color: #525860;
 }
 
 .footer {
@@ -25,6 +26,7 @@
 [data-theme='dark'] {
   --ifm-color-primary: #8D8DFF;
   --ifm-navbar-background-color: #33363A;
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
 }
 
 .header-github-link:hover {
@@ -363,4 +365,4 @@ article:has(.redoc-container) {
 /* Hide menu border on API viewer pages */
 .redoc-container .menu-content {
   border-right: none !important;
-}
\ No newline at end of file
+}
diff --git a/src/partials/features-zigzag.tsx b/src/partials/features-zigzag.tsx
index 993578d2d..90f771f23 100644
--- a/src/partials/features-zigzag.tsx
+++ b/src/partials/features-zigzag.tsx
@@ -91,11 +91,11 @@ function FeaturesZigZag() {
         <div className="py-12 md:py-20 border-t border-gray-800">
           {/* Section header */}
           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
-            <div className="inline-flex text-sm font-semibold py-1 px-3 m-2 text-green-600 bg-green-200 rounded-full mb-4">
+            <div className="inline-flex text-sm font-semibold py-1 px-3 m-2 text-green-800 bg-green-200 rounded-full mb-4">
               Open source
             </div>
             <h1 className="h2 mb-4">Community driven feature flagging</h1>
-            <p className="text-xl text-gray-500 dark:text-gray-300 mb-4">
+            <p className="text-xl text-gray-700 dark:text-gray-300 mb-4">
               OpenFeature is an open source CNCF incubating project under the Apache 2 license. Check out the project on{' '}
               <Link to="https://github.com/open-feature">GitHub</Link> and consider joining the{' '}
               <Link to="/community/">OpenFeature community!</Link>
@@ -126,11 +126,11 @@ function FeaturesZigZag() {
                 <div className="md:pr-4 lg:pr-12 xl:pr-16">
                   <div className="font-architects-daughter text-xl text-purple-600 mb-2">Avoid code-level lock-in</div>
                   <h3 className="h3 mb-3">One SDK, any backend</h3>
-                  <p className="text-xl text-gray-500 dark:text-gray-300 mb-4">
+                  <p className="text-xl text-gray-700 dark:text-gray-300 mb-4">
                     OpenFeature is designed to work with any feature flag management tool or in-house solution. This
                     enables you to switch between platforms or consolidate multiple platforms much more easily.
                   </p>
-                  <ul className="text-lg text-gray-500 dark:text-gray-300 -mb-2 pl-0">
+                  <ul className="text-lg text-gray-600 dark:text-gray-300 -mb-2 pl-0">
                     <li className="flex items-center mb-2">
                       <CheckboxIcon text="Continue to use your current solution" />
                     </li>
@@ -172,11 +172,11 @@ function FeaturesZigZag() {
                     Developed with the industry
                   </div>
                   <h3 className="h3 mb-3">Supports your favorite tools</h3>
-                  <p className="text-xl text-gray-500 dark:text-gray-300 mb-4">
+                  <p className="text-xl text-gray-700 dark:text-gray-300 mb-4">
                     OpenFeature has broad industry support, and many of the top open source and commercial tools have
                     created officially-supported providers.
                   </p>
-                  <ul className="text-lg text-gray-500 dark:text-gray-300 -mb-2 pl-0">
+                  <ul className="text-lg text-gray-600 dark:text-gray-300 -mb-2 pl-0">
                     <li className="flex items-center mb-2">
                       <CheckboxIcon text="Works with your favorite vendor" />
                     </li>
@@ -217,7 +217,7 @@ function FeaturesZigZag() {
                 <div className="md:pr-4 lg:pr-12 xl:pr-16">
                   <div className="font-architects-daughter text-xl text-purple-600 mb-2">Ultimate flexibility</div>
                   <h3 className="h3 mb-3">Speaks your language</h3>
-                  <p className="text-xl text-gray-500 dark:text-gray-300 mb-4">
+                  <p className="text-xl text-gray-700 dark:text-gray-300 mb-4">
                     OpenFeature supports many of the top programming languages, with more on the way.
                   </p>
                 </div>
diff --git a/src/partials/question-blocks.tsx b/src/partials/question-blocks.tsx
index 0f06456d4..a5dfd9dc4 100644
--- a/src/partials/question-blocks.tsx
+++ b/src/partials/question-blocks.tsx
@@ -28,7 +28,7 @@ function QuestionBlocks() {
               </div>
 
               <h4 className="h4 mb-2">What's a Feature Flag?</h4>
-              <p className="text-lg text-gray-500 dark:text-gray-300 text-center">
+              <p className="text-lg text-gray-700 dark:text-gray-300 text-center">
                 Feature flags are a software development technique that allows teams to enable, disable or change the
                 behavior of certain features or code paths in a product or service, without modifying the source code.
               </p>
@@ -44,7 +44,7 @@ function QuestionBlocks() {
                 <FontAwesomeIcon className="absolute top-5 left-[18px] text-purple-100 fa-xl" icon={faUserGroup} />
               </div>
               <h4 className="h4 mb-2">What's OpenFeature?</h4>
-              <p className="text-lg text-gray-500 dark:text-gray-300 text-center">
+              <p className="text-lg text-gray-700 dark:text-gray-300 text-center">
                 {siteConfig.customFields.description as string}
               </p>
             </div>
@@ -60,7 +60,7 @@ function QuestionBlocks() {
                 <FontAwesomeIcon className="absolute top-5 left-6 text-purple-100 fa-xl" icon={faClipboard} />
               </div>
               <h4 className="h4 mb-2">Why standardize?</h4>
-              <p className="text-lg text-gray-500 dark:text-gray-300 text-center">
+              <p className="text-lg text-gray-700 dark:text-gray-300 text-center">
                 Standardizing feature flags unifies tools and vendors behind a common interface, avoiding vendor lock-in
                 at the code level. It provides a framework for building extensions and integrations that can be shared
                 across the community.