search

tsugiproject / tsugi

Tsugi Admin, Developer, and Management Console (pls join the dev list)
http://www.tsugi.org
Apache License 2.0
346 stars 257 forks source link

Link colors changed and underlined recent change to tsugi-static #158

Open csev opened 1 year ago

csev commented 1 year ago

Hey @andrewniekamp - The changes you did to tsugi-static seems like something changed. Here is a before and after look at my lessons pages on my production servers. I also merged in all of your tsugi code - but this happened when I did a shift refresh on a server with already upgraded Tsugi and the shift-refresh grabbed a new static - so it is likely static and not the PHP code.

static1

static2

andrewniekamp commented 1 year ago

Hi @csev, this is probably because of a change in approach we took for dark mode since sometimes the coloring of links in dark mode made them a little hard to see (if the primary color ends up a bit dark). I ended up applying general styling to links in tsugi-static to use var(--text-color) and to be underlined to guarantee accessibility regardless of the theme color, but now that you mention it I think I should have just used a different theme variable (--text-light). I can open a PR for tsugi-static that should fix that.

jonespm commented 1 year ago

Google doesn't underline their links and has different colors for light or dark. Seems nice.

On dark they use #8ab4f8 which has a 9.96:1 contrast. On light they use #1a0dab which has a 12.42:1 contrast

Webaim suggests a possibly a blue compatible with both but no requirement to underline. I'm not sure I personally like the "sea of underlined links" style as it's called in the last comment but this page looks like it turned into. It's seems better used when shorter links are underlined in a body of text as on the Webaim page.

If you start exploring this, you’ll find that this requirement leaves only a small window of available page and link colors. For example, if your page has black text on a white background and you use the standard blue color for links, the link color must be between approximately this color of blue (#6a5eff) and this color of blue (#531fff). Any lighter or darker and it will not have sufficient contrast to the adjacent black text or to the white background, respectively.