Supported Guardrails cards have unreadable text in dark mode
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 99
- Forks
- 708
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 22
Description
Description
The cards under the Supported Guardrails section have insufficient text contrast when the documentation is viewed in dark mode.
The cards use a near-white background, while their titles and descriptions are also displayed using a very light text color. This makes content such as Content Length Guardrail, Regex Guardrail, JSON Schema Guardrail, and the other guardrail descriptions extremely difficult to read.
Affected page:
https://apim.docs.wso2.com/en/latest/ai-gateway/ai-guardrails/overview/
Actual behavior
The card text blends into the light card background and is barely visible in dark mode.
Expected behavior
The card foreground and background colors should provide clear, readable contrast in both light and dark modes. For example, the cards should use dark text on the existing light background, or use a dark background with light text when dark mode is enabled.
This is also an accessibility and usability issue because users cannot comfortably read the supported guardrail names and descriptions.
Screenshot
Steps to Reproduce
-
Open the following documentation page:
https://apim.docs.wso2.com/en/latest/ai-gateway/ai-guardrails/overview/
-
Enable dark mode using the documentation theme selector.
-
Scroll down to the Supported Guardrails section.
-
Observe the text inside cards such as:
- Content Length Guardrail
- Regex Guardrail
- JSON Schema Guardrail
- Sentence Count Guardrail
- URL Guardrail
- Word Count Guardrail
-
Notice that the card background is near-white while the title and description text are also very light, making the content difficult to read.
Version
WSO2 API Manager Documentation 4.7.0
Environment Details (with versions)
- Documentation version: WSO2 API Manager 4.7.0
- Page: AI Gateway → AI Guardrails → Overview
- Operating system: Linux
- Browser: Google Chrome 150
- Documentation theme: Dark mode
- Display resolution: 1920 × 1080
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the affected AI Gateway → AI Guardrails → Overview page and inspect the Supported Guardrails card styles used by the documentation theme. Compare the card foreground and background colors in light and dark modes, then verify that all listed guardrail titles and descriptions are readable with the documentation theme selector.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- accessibility, documentation
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100