Description

The current contrast ratio between selected and non-selected code in documentation blocks is 1.09:1, which is significantly below WCAG accessibility standards and makes code selection difficult to distinguish.

Problem Statement/Justification

The current contrast ratio of 1.09:1 between selected and non-selected code presents several accessibility issues:

• Falls well below WCAG 2.1 standards which require a minimum contrast ratio of 4.5:1 for text content (Level AA)
• Makes it difficult for users to identify which portion of code they have selected
• Creates potential barriers for users with visual impairments
• Impacts the overall usability of the documentation for all users
• Could lead to errors when copying specific portions of code and reduces the overall documentation experience.

Proposed Solution or API

There are two potential approaches to solve this contrast issue:

1. Improve the current grayscale contrast:

/* Current implementation /
background-color: #252525; / current contrast ratio: 1.09:1 */

/* Proposed implementation /
background-color: #86868D; / improved contrast ratio: 4.61:1 */

2. Alternative approach using colored contrast like other documentation sites:

Material UI uses a green tint for selection

Next.js documentation uses a blue tint

Alternatives

No response

Additional Information

No response