search

tinted-theming / home

Style systems and smart build tooling for crafting high fidelity color schemes and easily using them in all your favorite apps.
MIT License
254 stars 12 forks source link

Minimum accessibility of all schemes #26

Open joshgoebel opened 2 years ago

joshgoebel commented 2 years ago

I'm posting this as a follow-up to https://github.com/base16-project/base16/issues/46. I think that issue is very broad so I'm suggesting we start a bit smaller, with a single piece of the puzzle. Lets find some agreement there, and then expand the scope. I'd choose to start with raw accessibility.

It seems the first critical matter would be the accessibility of our baseline FG/BG pair, I'm referring to:

If a theme was going to get one thing right, it should be this... my understanding is that this would be all text that isn't targeted for some more specific syntax coloring, ie, potentially a LOT of text.

So I'm just running a quick scan on the entire schemes repo using the APCA-w3 library... asking it for the Lc (contrast) value of our key base00/base05 pairing... the negative values just indicate a reverse pairing (ie dark mode, vs light mode)... the positive and negative numbers are comparable. If you decide 75 is good then you should be happy with -75 or +75 equally.

Here is how our themes currently breakdown:

(this is not banded, so the < 45 includes the <30 etc)

Unlike WCAG the numbers must always be adjusted for font-size... so a 50Lc might be fine at 64px but terrible at 16px... (see the font table below)

So if we're going to have a rule (or guideline) at all we first need to decide on a "minimum text size and weight" that we're going to use... and that would tell us which Lc range we should be targetting.

APCA defines 30 as the "minimum contrast for any text" so I'd say 6 of our themes are failing terribly by any measure... For refernce:

Brogrammer - Lc -19.869322853654854 4e5ab7 / 1f1f1f
Icy Dark - Lc -15.169801465395219 095b67 / 021012
Pico - Lc -17.39516172313664 5f574f / 000000
summercamp - Lc -25.150557587757106 736e55 / 1c1810
Tokyo Night Terminal Storm - Lc -29.978792297475426 787C99 / 24283B
vulcan - Lc -28.231727048649518 5b778c / 041523

The most similar to WCAG 2.1 AA accessibility (for those familiar with such things) is APCA Lc 60... of which 63 of our themes fall below. The WCAG 2.1 AA "large text" is comparable to APCA Lc 45.

I had includes the tables here but GitHub zooms them hugely so I think it better to link to the APCA library:

https://github.com/Myndex/apca-w3#font-lookup-table

joshgoebel commented 2 years ago

I think if we're going to pick a single value we need to be very clear on what is it we're doing with that value... is this a rule? a guideline? And that might even determine the value... ie if we're making a hard rule - and "kicking themes out" (or not allowing them in) then perhaps it should err a little on the generous side... if we're proposing merely a guideline, perhaps we could go higher...

Or perhaps we allow a range.

actionless commented 1 year ago

if we're making a hard rule - and "kicking themes out" (or not allowing them in) then perhaps it should err a little on the generous side... if we're proposing merely a guideline, perhaps we could go higher...

i think just putting wcag-compliant (or non-compliant) themes to a separate directory/repo might be a good compromise