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

[cjfreedman]

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

Here's the Sort Site error:

Additional context or thoughts