search

fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.58k stars 333 forks source link

Fomantic CSS link colour causes accessibility contrast errors #2292

Open bmaupin opened 2 years ago

bmaupin commented 2 years ago

Bug Report

I'm not sure if accessibility is a goal of this library, but the default CSS link colour generates contrast errors when using the WAVE Web Accessibility Evaluation Tool.

Here's the colour, as per https://github.com/fomantic/Fomantic-UI-CSS/blob/master/semantic.css

a {
  color: #4183C4;
}

Steps to reproduce

  1. Create a link using Fomantic UI
  2. Install and open the WAVE Web Accessibility Evaluation Tool on the page
  3. Note the contrast errors reported on the links

Expected result

I would expect the library to generate accessible links

Actual result

The aforementioned contrast errors

Screenshot (if possible)

fomantic-link-contrast-error

Version

2.8.8

Thanks!

bmaupin commented 2 years ago

As a quick workaround, I set the default link colour to @blue (#0e6eb8) and it fixed the contrast errors.

lubber-de commented 2 years ago

Thanks for the hint. Awesome website for a11y check!

To completely pass the a11y contrast test this needs a whole refactoring of the default theme (or an additional a11y theme), so only changing the link color is unfortunately not enough. Therefore, I tag this as enhancement.

Btw: the @blue variable of the default theme is #2185D0, which is still not passing the contrast test https://github.com/fomantic/Fomantic-UI/blob/0091dab5e46a101e105cea89d47d5c81261c827f/src/themes/default/globals/site.variables#L243 image