swagger-api / swagger-api/swagger-ui

a11y: Not enough color contrast in Try it Now example data response

Open
#9,586 0 comments 24 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

backlog cat: a11y
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:
image

Here is the Sort Site error:
image

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

Open the contributing guide

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.