Change button colors for better accessibility

fkosmala commented 2 years ago

Hello and Happy new year !

I used PicoCSS (dark theme) for a small project that I want to be as accessible as possible and PicoCss have a small problem of contrast (you can check this on A11y color checker or any WCAG checker.

Can you make a better contrast on button, please ? (use darker background with white text or lighter background with black text)

Thank you very much

matjazpotocnik commented 2 years ago

Hi! I think there are some other accessibility issues too. I know I can change CSS custom properties (variables) but would be nice to have that fixed.

lucaslarroche commented 2 years ago

I am open to more contrasts. It is important. I have not always checked the accessibility of the colors.

Could you suggest changes in the default theme? (ideally directly in the SCCS files) What tools do you use to check accessibility?

matjazpotocnik commented 2 years ago

There are many tools available, I use WAVE Evaluation Tool and Siteimprove accessibility checker, available in the Chrome/Edge store. CSS overview in Dev tools can provide basic contrast issues. I'm not very familiar with SCSS so I'm testing with this demo: https://picocss.com/examples/classless/ with Light theme as I can see compiled colors and can test in the browser.

Link identified only by color: that means that people who don't see colors can not identify what is a link in the text. My proposal is to always underline links, which is also default behavior for all browsers. Link color should also be a bit darker.
73828c (--muted-color) lacks contrast, #687883 is ok, but I don't know how to get that color using vars;
--code-background-color and --code-color lacks contrast;
--ins-color (an possibly --form-element-valid-border-color (the green)) should have more contrast;
file input element and range sliders are not highlighted on focus;
focus indicator on valid/nonvalid (green and red) input elements is not visible enough (my opinion);
images in examples missing alt text;

I guess there are more bits here and there?

pauloxnet commented 1 year ago

I also have founds low contrast ratio scanning my Pico-based website with Google Lighthouse:

Background and foreground colors do not have a sufficient contrast ratio. Low-contrast text is difficult or impossible for many users to read. Learn more.

Can we open a PR based on @matjazpotocnik suggestions ?

lucaslarroche commented 1 year ago

Lots of good thoughts and ideas here. Thank you.

I'm conflicted here:

Pico should definitively be more accessible.
But I think we have to be flexible, and accept that certain colors, like the muted color (--muted-color), don't have enough contrast to keep some subtlety.
While I think we can slightly change the colors in a MINOR version, I think it's important to avoid breaking changes until we upgrade to version 2 (e.g. with an underline on primary links)
Should Pico have a High Contrast theme?
And if we have a High contrast theme, do we accept that the regular theme lacks contrast in places? (WCAG Level AA vs Level AAA)

picocss / pico

Change button colors for better accessibility #123

73828c (--muted-color) lacks contrast, #687883 is ok, but I don't know how to get that color using vars;