swagger-api / swagger-ui

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
https://swagger.io
Apache License 2.0
26.58k stars 8.96k forks source link

[Accessibility] WCAG 2.1 1.4.3 -- Insufficient Color Contrast #5247

Open KimPlausible opened 5 years ago

KimPlausible commented 5 years ago

Q&A (please complete the following information)

Describe the bug you're encountering

The color of the text and the color of the background are not in sufficient contrast to each other. This can give problems for users with visual impairments & color blindness, but also can affect a lot of other users, leading to important text potentially being overlooked.

To reproduce...

Steps to reproduce the behavior: Run Chrome Accessibility assessment or Siteimprove extension. See below screenshots for details.

Expected behavior

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Screenshots

Authorize has insufficient color contrast of 2.03 (foreground color: #49cc90, background color: #ffffff, font size: 10.5pt, font weight: bold). image GET has insufficient color contrast of 2.31 (foreground color: #ffffff, background color: #61affe, font size: 10.5pt, font weight: bold). image (query) has insufficient color contrast of 3.65 (foreground color: #808080, background color: #eff7ff, font size: 9.0pt, font weight: bold). image DELETE has insufficient color contrast of 3.62 (foreground color: #ffffff, background color: #f93e3e, font size: 10.5pt, font weight: bold). image POST has insufficient color contrast of 2.03 (foreground color: #ffffff, background color: #49cc90, font size: 10.5pt, font weight: bold). image Example Value has insufficient color contrast of 4.21 (foreground color: #337ab7, background color: #eff7ff, font size: 9.0pt, font weight: bold). image

Additional context or thoughts

Sufficient to provide control with sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast or provide Style Switcher to switch to High Contrast.

KimPlausible commented 5 years ago

Pri 2 (Not blocking, high impact): Authorize, GET, POST Pri 3 (Not blocking, low impact): (query), DELETE, Example Value

mgifford commented 1 year ago

This seems like such a trivial one to fix. We're seeing these basic colour contrast issues in our tests too. Please make sure that the colors conform to This is one of many good tools to test foreground/background colours and suggest better alternatives https://contrast-finder.tanaguru.com/