The color contrast of the dark mode falls below the minimum AA standard - specifically the blue and dark gray of the interface. See attached image.

I'm not sure if it makes sense to make the colors configurable, but at the least, it should meet AA standards.

-mike

CommentFileSizeAuthor
#9 color_contrast_dark_theme-3277708-9.patch11.42 KBnk_
#9 Screenshot 2022-09-08 at 13.01.05.png38.91 KBnk_
#9 Screenshot 2022-09-08 at 13.01.22.png38.92 KBnk_
#7 color_contrast_dark_theme-3277708-7.patch7.28 KBnk_
contrast.png22.97 KBultimike

Issue fork bootstrap_styles-3277708

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

ultimike created an issue. See original summary.

elber’s picture

elber
Primary language Portuguese, Brazil
Location Brazil
commented

What is the "AA" standards ?

ijf8090’s picture

ijf8090 commented

The Web Content Accessibility Guidelines (WCAG) is the most-used standard worldwide. There are three levels of WCAG compliance; A, AA, and AAA.

"Level AA conformance level is used in most accessibility rules and regulations around the world, including the ADA. To meet WCAG 2.0 Level AA conformance, the website is usable and understandable for the majority of people with or without disabilities."

For more information see https://www.accessiblemetrics.com/blog/what-are-the-levels-of-wcag-compl...

elber’s picture

elber
Primary language Portuguese, Brazil
Location Brazil
commented
elber’s picture

elber
Primary language Portuguese, Brazil
Location Brazil
commented
Assigned: Unassigned » elber
elber’s picture

elber
Primary language Portuguese, Brazil
Location Brazil
commented
Assigned: elber » Unassigned
nk_’s picture

nk_ commented
StatusFileSize
new color_contrast_dark_theme-3277708-7.patch7.28 KB

Here is the patch, changes are to target desired contrast standard only, without any particular "design" idea.

elber’s picture

elber
Primary language Portuguese, Brazil
Location Brazil
commented
Assigned: Unassigned » elber
Status: Active » Needs review
nk_’s picture

nk_ commented
StatusFileSize
new Screenshot 2022-09-08 at 13.01.22.png38.92 KB
new Screenshot 2022-09-08 at 13.01.05.png38.91 KB
new color_contrast_dark_theme-3277708-9.patch11.42 KB

Here is the new patch that includes more UI elements (i.e. buttons) so feel free to ignore the first one. I did get a report that blue+white combination on hover/focus states fails on AA standard contrast but did not feel like going there and deconstructing the whole design after all.

Attaching also screenshots of UI with those changes applied.

mahmoud-zayed’s picture

mahmoud-zayed commented
Status: Needs review » Needs work

We use scss then compile to css, please add the scss changes. thanks

mahmoud-zayed’s picture

mahmoud-zayed commented
Version: 1.0.x-dev » 2.0.x-dev