swagger-api / swagger-api/swagger-ui
a11y: Not enough color contrast in display of input/output schema
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
Q&A (please complete the following information)
- OS: [e.g. macOS] Windows 10
- Browser: [e.g. chrome, safari] Chrome
- Version: [e.g. 22] 121
- Method of installation: [e.g. npm, dist assets] npm
- Swagger-UI version: [e.g. 3.10.0] Swagger UI React 5.11.3
- Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0] OpenAPI 3.0
Content & configuration
Basic/ default
Describe the bug you're encountering
We are using a tool called Sort Site to evaluate our site for 508 accessibility compliance. It is flagging there is not enough color contrast in the display of the input schema: "Ensure that text and background colors have a 7:1 contrast ratio."
Violates WCAG 2.0 AAA 1.4.6 https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html
This is occurring on the
- "td" (contained within the "tr class=property-row required")
- "span class=prop-type"
- "span class=prop-format"
- "span class=property primitive"
- "p" contained within the div with class "renderedMarkdown"
To reproduce...
Open a POST method, Expand Schemas, expand an input schema, then example data elements.
Expected behavior
enough color contrast.
Screenshots
Here's the screenshot of the display
Here are the errors from Sort Site and the html context:
Additional context or thoughts
I would think the red asterisk marking "required" does not have enough color contrast either, because that element did not have enough contrast elsewhere.
Contributor guide
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
Reproduce the issue through POST → Expand Schemas → an input schema → example data elements, then inspect the listed td, prop-type, prop-format, property primitive, renderedMarkdown, and required-marker elements. Check their foreground and background colors against the WCAG 7:1 target; done means the flagged schema text and required marker meet the required contrast.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100