Improve color contrast for default colors and UI elements

[mattxwang]

In kevinlin1/just-the-class#32, a user of @kevinlin1's just-the-class theme has correctly observed that our theme packages a button theme that doesn't pass accessibility standards.

In particular, my guess (from looking at the linked website) is that it's our blue button; the #227efa default doesn't pass the WCAG AAA guidelines.

I've raised accessibility concerns in various issues across the repo (ex #566, #870). To make this issue more narrow, I'd like to propose a new guideline for our theme colors: any default element we package with the theme should meet WCAG AAA guidelines (at least, until the APCA ones come out).

This would include:

• buttons (like discussed in the above discussion)
• labels
• nav elements
• search elements

In addition, while we don't bundle callouts by default, many users do use them; thus, I think they should be included in this list too.

At a cursory glance, I don't think this should be too big of a change (many of our colors are close to the ~4.5:1 ratio). Implicitly, I'm benchmarking against WCAG AAA Large instead of the AA for UI components (from my perspective, buttons have always fit in the former category than the latter).

That being said, I may be missing something - glad to get some more input on this! I'll likely get a draft PR in the next week or so.

[pdmosses]

In addition, while we don't bundle callouts by default,

If we could agree on default colors for some common callouts, it should be possible to predefine those callouts in (S)CSS. Configured callouts for the same names would override the default colors.

many users do use them; thus, I think they should be included in this list too.

Currently, the theme supports callouts with all the colors defined by the theme: grey-lt, grey-dk, purple, blue, green, yellow, and red. The hues used for the text and background depend on whether color_scheme is set to dark¹ (and on whether callouts are loud or quiet). Callouts can also have a custom opacity.

We might need to restrict the set of approved/default callout colors to ensure AAA in both our default light and dark schemes. However, I think the theme should still allow the use of all predefined colors and custom colors for callouts (as this may be needed in connection with custom light and dark schemes).

Footnotes

1. When we add support for toggling/auto-switching between light and dark color schemes, the callouts styling will need to be updated to use a media prefers-colour-scheme query. Callout configuration might also need to allow separate settings of opacity for light and dark schemes. ↩

[mattxwang]

If we could agree on default colors for some common callouts, it should be possible to predefine those callouts in (S)CSS. Configured callouts for the same names would override the default colors.

I think the stock set (when looking at CSS/UI Frameworks like Bootstrap and Bulma) are:

• primary (potpourri of colours)
• success/new (green)
• warning/important (yellow)
• danger (red)
• info/note (blue)

This aligns relatively closely with the pre-existing callout colours that are used in our version of the theme / you originally proposed. So, overall I'm quite satisfied with the overall idea behind the current set!

I think the improvements we should make are likely around the opacity for the background, which in turn will resolve the color contrast issues. For example, Bootstrap's Alerts maintain high contrast ratios while using a single hue, which is pretty close in design to our approach. So, I think with some tweaking of our existing color palette, we can achieve the goal we're looking for.

I'm unsure if I'll be able to find good defaults for both loud and quiet, but I think that should be doable. Dark mode does also add another variable to the mix, but Bootstrap has done a good job there as well. I agree that a prefers-color-scheme approach is the right way forward.

And yes, definitely agreed that we should still allow users to pick custom colors; extra opacity settings may be useful, though I could also see this being done purely in SCSS.

I'll see if I can dedicate some time into a PoC for this (i.e. picking some colors, and putting up a draft PR). Let me know if you have any other thoughts!