wso2 / wso2/docs-apim

Supported Guardrails cards have unreadable text in dark mode

Open Beginner friendly
#11,639 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type/Bug
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
Image
Steps to Reproduce
  1. Open the following documentation page:

    https://apim.docs.wso2.com/en/latest/ai-gateway/ai-guardrails/overview/

  2. Enable dark mode using the documentation theme selector.

  3. Scroll down to the Supported Guardrails section.

  4. Observe the text inside cards such as:

    • Content Length Guardrail
    • Regex Guardrail
    • JSON Schema Guardrail
    • Sentence Count Guardrail
    • URL Guardrail
    • Word Count Guardrail
  5. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.