search

wet-boew / wet-boew-styleguide

A style guide for the Web Experience Toolkit.
http://wet-boew.github.io/wet-boew-styleguide/index-en.html
35 stars 32 forks source link

btn-default contrast ratio #420

Open jeffrey-devries opened 8 months ago

jeffrey-devries commented 8 months ago

The default versus focus state of the btn-default class that we use in 'expandable/collapsable' (details/summary) accordion element and buttons is not meeting the minimum 3:1 contrast ratio expectation based on the WCAG 2.1 S.C. 1.4.11 requirements. The settings in the WET only produce a 1.3:1 ratio.

.btn-default{color:#335075;background-color:#eaebed;border-color:#dcdee1} .btn-default.focus,.btn-default:focus{color:#335075;background-color:#cfd1d5;border-color:#989da6} .btn-default:hover{color:#335075;background-color:#cfd1d5;border-color:#bbbfc5} .btn-default.active,.btn-default:active,.open>.btn-default.dropdown-toggle{color:#335075;background-color:#cfd1d5;background-image:none;border-color:#bbbfc5}

I have a solution to suggest that will produce 3.8:1 ratio. Please note I've applied this in the iService.prv CSS to override the template until this can be looked at. .btn-default.focus,.btn-default:focus{color:#ffffff;background-color:#777777;border-color:#333333} .btn-default:hover{color:#ffffff;background-color:#777777;border-color:#333333} .btn-default.active,.btn-default:active,.open>.btn-default.dropdown-toggle{color:#ffffff;background-color:#777777;background-image:none;border-color:#333333}

Thank you for your consideration.

ghost commented 8 months ago

I would post your concerns at https://github.com/wet-boew/wet-boew as this repo is not maintained.

I am just a volunteer on this GitHub project.
jeffrey-devries commented 8 months ago

OK. Thanks, I'll do that.