Button Font Color/Contrast

For buttons, you aren’t able to change the font color. This wouldn’t be a problem if it automatically chose a WCAG accessible button font color that had high contrast compared to the button background.

It looks like it automatically makes the button font color black when the button background is bright yellow, but only when it is bright yellow. I’m not sure if how that was coded in (just yellow, or some contrast based checker [if this, then that]).

When using a bright green, for example, the contrast does not meet accessibility standards (WebAIM: Contrast Checker) – button background color bright green, font color white. I think this is a bug because it does automatically change the contrast sometimes (for bright yellow), but not for other colors (did not comprehensively check this!).

From what I can tell, this applies to every button customization in Ghost. I’m reporting today because the great new newsletter customization options reminded me this is an issue.

Proposed fixes:

  1. If you were able to decide the button font color, it wouldn’t be an issue.
  2. Alternatively, if it automatically inverted the color to black button font for all bright colors, that would fix the bug too. Not sure if there is a way to use WCAG guidance to automate this.

I use ghost pro and am not self-hosted. I’m on Firefox (Zen) and Windows 11. Ghost version: 5.126.0-0-g6c835985+moya