Open kroudams opened 2 years ago
For icons we could probably set background-color
to something like CanvasText
Example:
@media screen and (forced-colors: active) {
.bc-legend-item-dt .icon {
background-color: CanvasText;
}
}
Or
@media screen and (forced-colors: active) {
:root {
--icon-primary: CanvasText;
}
}
The same is true for hover state / active item.
If this works, then we should go for it:
@media screen and (forced-colors: active) {
:root {
--icon-primary: CanvasText;
}
}
``
Summary
MDN new design doesn't look particularly accessible in high-contrast/forced-colors mode
Mostly it lacks the hover effect and active item support (in "In this article"
<aside>
) and icons are indiscernibleURL
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
Reproduction steps
high-contrast mode
(in Windows: leftAlt
+ leftShift
+Print screen
)Expected behavior
Icons should be visible and
hover
/active item
effects should be visible.Actual behavior
Icons are not visible and
hover
/active item
effect cannot be differentiated.Device
Desktop
Browser
Chrome
Browser version
Stable
Operating system
Windows
Screenshot
Anything else?
No response
Validations