Skip to content

Fix WCAG AA Color Contrast Violations #1329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
huangkevin-apr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix WCAG AA Color Contrast Violations #1329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -363,4 +365,4 @@ article:has(.redoc-container) {
/* Hide menu border on API viewer pages */
.redoc-container .menu-content {
border-right: none !important;
}
}
14 changes: 7 additions & 7 deletions src/partials/features-zigzag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Jan 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

While changing text-gray-500 to text-gray-700 correctly fixes the color contrast issue, this color class (text-gray-700) is now repeated in multiple places across features-zigzag.tsx and question-blocks.tsx. This could make future theme adjustments more difficult.

To improve maintainability, consider creating a custom utility class for this muted text style. You could add the following to src/css/additional-styles/utility-patterns.css:

.text-muted {
  @apply text-gray-700 dark:text-gray-300;
}

Then, you could apply this class like so:

<p className="text-xl text-muted mb-4">

This would centralize the color definition, making it easier to manage. A similar approach could be used for text-gray-600 (e.g., with a .text-muted-alt class), which is also used for muted text in this file.

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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/partials/question-blocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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.
Expand Down