Fix WCAG AA Color Contrast Violations

[huangkevin-apr]

This PR

• Fixes 15 WCAG AA color contrast violations across the OpenFeature website

• Updates text colors in light mode from text-gray-500 to text-gray-700 for improved readability

• Changes the "Open source" badge text color from text-green-600 to text-green-800 for better contrast against the green background

• Adds CSS custom properties for DocSearch muted color to ensure proper contrast in the search placeholder

• adds this new feature

Related Issues

This PR addresses 15 WCAG AA color contrast violations identified by accessibility testing. All violations were related to insufficient text contrast ratios that failed to meet WCAG 2.1 Level AA standards (criterion 1.4.3).
When running IBM Accessibility Checker (Version 4.0.9) on the homepage, 15 contrast-related accessibility violations were reported.

Screenshot of Violation Element:

Violation Report:

Notes

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications. The generated fixes were manually reviewed and validated before submission.

Follow-up Tasks

N/A

How to test

• Build and run the site locally
• Verify that text remains readable and visually appealing in light mode
• Run accessibility audit tools (e.g., IBM Equal Access Checker) to confirm all contrast violations are resolved
• Check that dark mode appearance is unchanged

Fix Before:

Fix After:

[netlify]

✅ Deploy Preview for openfeature ready!

Name	Link
🔨 Latest commit	135fffc
🔍 Latest deploy log	https://app.netlify.com/projects/openfeature/deploys/69626d0ec081900008e687a0
😎 Deploy Preview	https://deploy-preview-1329--openfeature.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Summary of Changes

Hello @huangkevin-apr, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the OpenFeature website's accessibility by addressing multiple WCAG AA color contrast violations. The changes primarily involve updating text and badge colors to meet higher contrast ratios, ensuring a more readable and inclusive experience for all users, particularly in light mode. Additionally, it standardizes the muted color for the DocSearch component across themes.

Highlights

• Accessibility Improvements: Resolved 15 WCAG AA color contrast violations across the OpenFeature website, enhancing readability and compliance with accessibility standards.
• Text Color Updates: Adjusted text colors in light mode from text-gray-500 to text-gray-700 to improve contrast and readability.
• Badge Color Enhancement: Modified the 'Open source' badge text color from text-green-600 to text-green-800 for better contrast against its green background.
• DocSearch Muted Color: Introduced CSS custom properties for DocSearch muted color to ensure appropriate contrast for the search placeholder in both light and dark themes.
• Automated Fix Generation: The applied fixes were initially generated by A11YRepair, an automated web accessibility repair tool, and subsequently manually reviewed and validated.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively addresses 15 WCAG AA color contrast violations by updating text colors for better readability in light mode. The changes in custom.css, features-zigzag.tsx, and question-blocks.tsx are correct and achieve the goal of improving accessibility. I've added one suggestion to improve long-term maintainability by centralizing the new text color styles into custom utility classes, which would make future theme updates easier.

[gemini-code-assist]

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.