swagger-api / swagger-api/swagger-ui
a11y: Not enough color contrast in Try it Now example data response
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 some of the sample values for the example response to the Try it Out: "Ensure that text and background colors have enough contrast."
Violates WCAG 2.0 AA 1.4.3 https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
This is in the span element with "style=color: rgb(211,99,99)"
To reproduce...
Open a POST method, click Try it Now and click Execute. Scroll down to the example value in the response.
Note this is just integers, other datatypes may also have problems
Expected behavior
enough color contrast.
Screenshots
Here is where it is happening:
Here is the Sort Site error:
Additional context or thoughts
Why are these data values shown in red anyway? Red is the color for warnings and errors and there is nothing wrong with these data values. Really, all data values should be rendered in the same green or blue color.
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 by opening a POST method, using Try it Now, executing it, and inspecting the example response values in the rendered span. Trace the styling that produces the red sample values, then verify that the updated colors meet WCAG 2.0 AA contrast requirements and no longer imply an error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100