Contrast issue with the background-color of <code> elements
glmvc opened this issue · comments
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
- I have read the Community Participation Guidelines.
- I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.
this is a self-link (a kind of link in a page that reference to the page itself)
@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.