nextjs - 💡(How to fix) Fix Low text contrast in code example dropdown (accessibility issue) [9 comments, 4 participants]

TL;DR

Adjusting the CSS styles for the code block dropdown in the Next.js documentation to increase the contrast between the text color and background color is likely to resolve the issue.

Guidance

• Review the CSS styles applied to the TypeScript/JavaScript selector dropdown to identify the current text and background colors.
• Consider updating the CSS to use a higher contrast color scheme, such as using a darker text color on a lighter background or vice versa.
• Test the updated styles in both light and dark modes to ensure readability and accessibility.
• Refer to accessibility guidelines, such as the Web Content Accessibility Guidelines (WCAG), for recommendations on minimum contrast ratios.

Example

No specific code example can be provided without knowing the exact CSS styles currently in use, but an example of how to update the CSS might look like:

.code-block-dropdown {
  background-color: #f0f0f0; /* light gray background */
  color: #333; /* dark gray text */
}

Notes

The exact CSS updates will depend on the current styles and the desired design. It's essential to test the changes in different environments and modes to ensure the fix works as expected.

Recommendation

Apply a workaround by updating the CSS styles to improve contrast, as this is a specific and targeted solution to the reported issue.