Accessible link colors aren't possible with default "Source" theme

Bugs
1

Hey folks, I think I’ve run into a major accessibility issue in the main “Source” theme, but I’d like to hear what y’all think. Currently, with a dark background in the theme settings, I don’t see a way to send accessible email newsletters with correct link colors. Details below…

Issue Summary

  • When using the Source theme, if you pick a dark background color for your website, there’s no way to send accessible emails with a correct link color.
  • The theme uses the “accent” color for ALL links, on website and in email newsletters, regardless if the background color is light or dark.
  • Since emails are on a white background, a bright link color doesn’t work and isn’t accessible

Steps to Reproduce

  1. Set up a dark site with a bright accent color using the Source theme
  2. Send a test email to yourself, which will be a on white background
  3. Take note of the link colors, which should be hard to read

Setup information

Ghost Version
Main, hosted version of Ghost, on a paid Pro plan

How did you install Ghost?
Hosted version, just signed up online

This is kinda a weird bug to run into, because handling accessible link colors should be table stakes by now. If our themes support light/dark background, we also need to support light/dark accent colors.

2

If you’re unsure what I mean, here’s a visual example, where a link looks correct on a dark background, but the same accent color setting simply doesn’t work on a light background (like an email)

image
image1172×1056 14.9 KB

3

A quick fix for this problem is to set a different accent color for website display, and keep the Ghost accent color for email.

For example, you can change the link on the website to white using:

<style>
  .gh-content a {
    color: white !important;
  }
</style>
4

I’ll look into code solutions, but that seems kinda extreme for the default theme with near default settings.

Does anyone know the correct place to run this up the chain? I’d be happy to pitch in a proper ticket or submit some code, if that’s possible.

5

You could open an issue over on GitHub. :)

7

Wow, Source really said ‘one color fits all’? Bold move. Guess we’re all playing ‘find the link’ now. Time for a fix, huh?

8

How would we do this with just page/post links as well as newsletter links, without overwriting the accent color in headers, etc.?

Currently, our accent color makes the site links inaccessible. If I change all links to an accessible color, it also changes the title of the site in the header.

9

Never mind. I got it working with

<style>
    section.gh-content.gh-canvas a {
        color: blue !important;
        text-decoration: underline !important;
    }
</style>

This is in Solo theme. Not sure if different themes have different content sections or if that’s just Ghost.

10

Glad you were able to come up with a solution. Note that this is probably not going to fix newsletters (be sure to test!).

My preferred solution in this situation is to set the ghost accent color (set in the dashboard) to something that’s accessible on white, then to override it on the webpage as needed to fix the css. This causes the newsletter to go out with an accessible color applied to links and the white-on-accent portal buttons to work. Then overwrite, something like this (all css should be within style tags, not shown)

body {
 --ghost-accent-color: #xxxxxx
};

That effectively sets the (inaccessible) color sitewide except on portal (and newsletters don’t include your theme/code-injection styles either), and then you can use something like the code proposed by @bdusablon to change the link color. (Selectors may vary with theme.)