Page MenuHomePhabricator

Links in elements with background color should become black so they are accessible
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
Various links inside table rows with backgrounds do not meet color contrast guidelines for links:

Screenshot 2024-03-23 at 11.41.33 AM.png (464×1 px, 117 KB)

Screenshot 2024-03-23 at 11.47.53 AM.png (1×302 px, 53 KB)

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.

Screenshot 2024-03-23 at 11.41.19 AM.png (452×1 px, 114 KB)
Screenshot 2024-03-23 at 11.48.24 AM.png (814×252 px, 33 KB)

/* [[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.):

Event Timeline