search

goblindegook / littlefoot

Footnotes without the footprint.
https://littlefoot.js.org
MIT License
228 stars 30 forks source link

Accessibility: improve button contrast #419

Open biou opened 4 years ago

biou commented 4 years ago

I just checked the contrast of the grey button with the three white dots, and currently the contrast between this grey and white is of 1.3:1. It would be better if we could have a contrast of 3:1. This tool can help in finding more contrasted colors: Tanaguru contrast finder

goblindegook commented 4 years ago

Hi @biou, I just pushed an overhaul of the styles for littlefoot, including a colour scheme change. I'm trying to keep a neutral scheme that would look reasonably decent by default on a variety of designs. If you could have a look at the code (in the master branch), that'd be appreciated. Thanks!

biou commented 4 years ago

No problem, I will have a look in the next few days.

biou commented 4 years ago

For the default button, the contrasts are ok. When you display the number of the footnote by customising the buttonTemplate, then the contrast is not sufficient. For a small text, the contrast of the text on the background should be at least 4.5:1 (see https://www.w3.org/TR/WCAG21/#contrast-minimum ) But you provide an alternative through the title attribute, so for me what you propose here is ok.

goblindegook commented 4 years ago

Good catch, I'll darken the button a bit.

AlainVagner commented 3 years ago

Just one proposal to improve the contrasts a bit with the current version:

    --button-active-background-color: #3f3f3f;
    --button-text-color: #fff;