swagger-api / swagger-api/swagger-ui

a11y: Not enough color contrast in Request body Schema element data type and example fields

Open
#9,585 0 comments 25 reactions 0 assignees View on GitHub

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. In the request post body schema datatype and example fields, Sort Site is flagging that there is not enough color contrast: "Ensure that text and background colors have enough contrast. The text color to background color contrast ratio after composition is:
4.15 with color: rgb(107,107,107);background-color: rgb(227,227,227);font-size: 9pt;font-weight: 600;
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text

Violates WCAG 2.0 AA 1.4.3 https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

This is occurring on the span element with class of "prop-type" and the span element with class of "property primitive", which are inside the div with class "model-box".

To reproduce...

Expand the POST pane to expose the Request body. Click Schema, then click to expand any of the parameters.

Expected behavior

Darken the datatype and example display so there is enough color contrast

Screenshots

Here's where the error occurs
image

Here's the Sort Site error:
image

Additional context or thoughts

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

Start by searching the Swagger UI styles for the prop-type class and the property primitive class, then reproduce the issue by expanding a POST request's Schema section. Adjust the datatype and example text colors so their contrast meets WCAG 2.0 AA requirements, and verify the result with an accessibility checker.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.