openshift-cs / okd.io

20 stars 50 forks source link

Low contrast for text / background #250

Closed sandrobonazzola closed 2 years ago

sandrobonazzola commented 3 years ago

The new website has very low contrast between text and background: it makes it difficult reading the content. A nice report for usability and accessibility for the website is available here: https://wave.webaim.org/report#/https://www.okd.io/

travier commented 2 years ago

The colors are set here: https://github.com/openshift-cs/okd.io/blob/main/overrides/assets/stylesheets/home.css

binnes commented 2 years ago

Solution provided by Brandon Johnson :

/* extra.css:39 */
[data-md-color-primary=blue-grey] {
    --md-default-bg-color: hsla(0, 0%, 87%, 1);
    --md-default-bg-color--light: hsla(0, 0%, 90%, 1);
    --md-default-bg-color--lighter: hsla(0, 0%, 93%, 1);
    --md-default-bg-color--lightest: hsla(0, 0%, 96%, 1);
    --md-default-fg-color: rgba(0, 0, 0, 0.95);
    --md-default-fg-color--light: rgba(0, 0, 0, 0.8);
}

/* home.css:83 */
h2:after {
    opacity: .15;
}