search

mortendk / eleven

Drupal 8 admin theme that goes to 11
http://eleventheme.com
GNU General Public License v3.0
49 stars 18 forks source link

Overall accessibility color contrast issues #163

Open cehfisher opened 7 years ago

cehfisher commented 7 years ago

The issue is:

Similar to #155 and #156 the overall color combinations on the site, although light and fresh, need to have some accessibility issues addressed. For a sample page, I chose the main admin/content page to check and found that most color combinations do not pass the WCAG 2.0 AA color contrast recommendations. Most of the color combinations that do pass, do so only because the font sizes are larger than 18px.

Screenshots:

content-page blue-sky-on-white concrete-light blue-sky-50 blue-sky asphalt-light

Where (url)

admin/content

Todo By testing color combinations using an accessibility tool, you can modify the existing theme colors to allow more ease of use. This tool is one of my favorites, as it allows you to slightly adjust colors on the fly to test: http://contrastchecker.com

I'd start off addressing the most critical color combinations, like the white text on bluesky-50 and other more obvious contrast issues, as they will be most problematic to your users.

See https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-contrast for more info on why it is important to make sure you color combinations need to pass.

mortendk commented 7 years ago

oooh man makes me miss the good old days with web safe colors ;)

mortendk commented 7 years ago
cehfisher commented 7 years ago

hey @mortendk how can I help on this ticket? colors are so personal, but I could send a PR with some recommended color combos or something. just let me know!

mortendk commented 7 years ago

What im thinking in instead is different color schemes, that is kinda easy cause eleven theme is written prober with css variables

I know that people that are working in the a11y space sees this as the most important thing ever, like geeks like me goes apeshit on how the markup is structured. But my first priority with eleven is to make it look awesome that means using colors and tones that looks n feels right. Not that they make a whitelist of a11y colors.

So my solution in this is to create multiple color schemes, then when that design work begins look into different color schemes that matches the design i want. then those that have a need for a specific color contrast can use that and those that dont can get other options

cehfisher commented 7 years ago

yeah i can dig it. i noticed in another feature ticket that you wanted users to be able to pick color schemes in the future, so once the dust settles on the overall theme let me know and I can help you choose an alternate a11y friendly color palate.

alternatively, you could add a JS enabled toggle button that changes the theme to a "high contrast" theme, much like we did on Grey Muzzle's site http://www.greymuzzle.org (see top left cover near the logo). it doesn't have to be as drastic as we made it in that example, but you get the point.

a11y space sees this as the most important thing ever

one last note, wanted to reiterate that having accessible color combinations is not really a aesthetic thing, but a functionality thing. literally not being able to read the words on a page because the contrast is not high enough is a severe limitation to your product. might help you to think about it as a UI/UX issue, not just an accessibility issue.

mortendk commented 7 years ago

I know its a battle between aesthetic vs functional. ;) and one thing with the eleven theme is that functionality, speed, code effeciency etc ... comes after "it looks awesome" :) (yes i know i can start a flamewar on this approch - but imho thats the only way we can get pretty into drupal)