NOTE: For most up to date best practice on solving this issue, please see https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Consider_globally_setting_link_color_inside_tables_with_background
Steps to replicate the issue (include links if applicable):
- Visit https://en.m.wikipedia.org/wiki/UEFA_Euro_2024_qualifying?minervanightmode=1 or https://fr.m.wikipedia.org/wiki/Sondages_sur_les_%C3%A9lections_europ%C3%A9ennes_de_2024?minervanightmode=1
- Check color contrast
What happens?:
Various links inside table rows with backgrounds do not meet color contrast guidelines for links:
What should have happened instead?:
The following rule seems to fix all of the link issues I've encountered. It works because the backgrounds tend to be set with a text color of black in mind.
- Recommended fix **
To distinguish links from non-links I suggest bolding and adding an underline.
/* [[phab:T360844]] */
html.skin-theme-clientpref-night table [bgcolor] a,
html.skin-theme-clientpref-night th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a,
html.skin-theme-clientpref-night td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a,
/* should not apply to th elements which have their own background. */
html.skin-theme-clientpref-night tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a {
color: #202122; /* @color-base */
text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os table [bgcolor] a,
html.skin-theme-clientpref-os th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a,
html.skin-theme-clientpref-os td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a,
html.skin-theme-clientpref-os tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a {
color: #202122; /* @color-base */
text-decoration: underline;
}
html.skin-theme-clientpref-os .infobox a {
color: var( --color-link ) !important;
}
}Software version (skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):