Contrast issue with the background-color of <code> elements

[glmvc]

Summary

In both light and dark mode, the background color of the <code> elements can hardly be distinguished from the background color behind it in certain places.

For example, take a look at the zebra-striped "Technical summary" tables, where each odd row has a background-color that is nearly identical to the one of the <code> elements within it.

URL

The issue is global (styling). Example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup#technical_summary

Reproduction steps

The issue is visual (styling). Please visit the sample URL or check out the screenshots below.

Expected behavior

A distinguishable background-color to visually recognize the <code> elements.

Actual behavior

The <code> elements are visually indistinguishable because of the nearly identical background-color.

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Mac OS

Screenshot

light mode

#f2f1f1 on #f9f9fb (Contrast Ratio = 1.07:1)

dark mode

#343434 on #313131 (Contrast Ratio = 1.04:1)

Anything else?

CSS that sets the background-color for <code> CSS that sets the background-color for table cells in odd table rows

Validations

• [X] I have read the Community Participation Guidelines.
• [X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[skyclouds2001]

this is a self-link (a kind of link in a page that reference to the page itself)

[glmvc]

@skyclouds2001 You're right about <colgroup>, but note the <col> link, for example. And it's possible that other links appear in such tables. The "Technical summary" table is just one example.