Low text contrast in code example dropdown (accessibility issue)

[optanwar]

What is the documentation issue?

The text color and background in the code block dropdown (TypeScript/JavaScript selector) have very low contrast, making the text hard to read especially in dark mode.

Steps to reproduce:

Visit the Next.js docs

Scroll to any code example with the TypeScript/JavaScript selector

Notice the dropdown text blends with the background

Expected behavior:
Dropdown text should have higher contrast for better readability and accessibility.

Screenshot:

Additional context:
Improving text contrast will enhance readability and meet accessibility standards.

Is there any context that might help us understand?

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/getting-started/installation

[icyJoseph]

Hi @optanwar are you using Windows? We might have been bitten by the OS we use and introduced this issue. We'll investigate, but would love some input from you. Browser, OS? Is it still happening?

[optanwar]

Thanks @icyJoseph for checking! I’m on Windows 11 using Chrome, and I can confirm the issue is still happening on my end.

[konhi]

Happens on Windows 10, Chrome 142 as well. This is also a case on Vercel docs website. Setting background-color to select explicitly, fixes it

[icyJoseph]

Ty, we'll have a fix up soon - as pointed out this also happens on Vercel sites, because the same design system is being used under the hood.

A PR exists now to fix it, undergoing review.