Suitecrm: Accessibility - WCAG color contrast [Request]

[horus68]

Issue

SuiteCRM 7.10 will have templates with styles. It will be relatively easier to change the values (CSS only, so no web interface controls). Designs are designs and not all will like any of them.

On the other hand its important that SuiteCRM will be WCAG 2.0 color contrast compliant. So there should be a design aimed to that.

• I'm a realistic person and I'm not expecting that SuiteCRM will ever be "AAA level" compliant WCAG 2.0 (some specs are truly difficult to achieve even for plain sites).
• But for color contrast the "AAA" levels its easy to achieve!

Expected Behavior

SuiteCRM template should have a style that can be "AAA" level compliant for color contrast:

• Design 1 - would be AAA compliant (even if not that pretty!). That would also require bigger fonts.
• Design 2 - would be AA compliant (safe but more prettier!).

This would bring SuiteCRM valid regarding WCAG ACCESSIBLE COLORS.

Community

Bring on your requests and ideas and try to implement them in one design. Make a color palet for background and foregroud
Note: This Git issue was created only for Color contrast issues. This would leave Screen Readers and full WCAG 2.0 specification for websites. On those issues please create separated GIT issues as a request.

So:

• Make a list of what needs to be changed first (for 7.10 final release)
• Create code proposals.
• Ask for approval.

Context

• European government rules and requirements for Web accessibility related to public sector bodies.
• Users with visual difficulties

Directive (EU) 2016/2102 of the European Parliament and of the Council of 26 October 2016 on the accessibility of the websites and mobile applications of public sector bodies (Text with EEA relevance )
http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32016L2102

Your Environment

• SuiteCRM Version used: 7.10

Web Accessibility Tools - Colors

For designers: Use one of this online tools to test the contrast colors level:

• Accessible-colors - http://accessible-colors.com
• Webaim - https://webaim.org/resources/contrastchecker/
• Contrast Checker (AcartComm) https://contrastchecker.com/

For webmasters: Extensions for Chrome:

• To pick and test colors - WCAG Luminosity Contrast Ratio Analyzer
  https://chrome.google.com/webstore/detail/wcag-luminosity-contrast/lllpnmpooomecmbmijbmbikaacgfdagi

Web Accessibility Tools - Site Checker

AChecker - https://achecker.ca/checker/index.php
Cynthia Says - http://www.cynthiasays.com/
EvalAccess - http://sipt07.si.ehu.es/evalaccess2/index.html

Other tools:
https://dynomapper.com/blog/27-accessibility-testing/246-top-25-awesome-accessibility-testing-tools-for-websites

For webmasters: Extensions for Chrome:

• Evaluate a site - WAVE Evaluation Tool
  https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

• Siteimprove Accessibility Checker https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc

Documents

• Official WCAG 2.0 specification : https://www.w3.org/TR/WCAG20/
• Contrast (Minimum): Understanding SC 1.4.3
  https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
• Checklist and recommendations for implementing HTML-related principles and techniques for those seeking WCAG 2.0 conformance
  https://webaim.org/standards/wcag/checklist

[isleshocky77]

This is still a very broad ticket. Might be better off turning this into a project with associated ticket for different parts. Or at least make a checklist of current problems that someone can go through and fix one by one.

[horus68]

I opened this just about color contrar background / foreground.
There are things that require users to know the direction the coders from SalesAgility will take on templates before making proposals for changes.
Actually, from the forum discussion I found a relevant information that could make this very easy to accomplish:

I am thinking of create two sets for each colour, eg $bg-color-n and a $fg-color-n. fg would control icon color, textual items. bg would control the background of buttons, and other areas which are blocked out.

If that will happen it will be easy and we just need to discuss the color code for foreground and background color for a new style!

So: There will be styles for admin template (Dusk, dawn, etc). I would not change those.
Lets create a new style aimed for acessibility.
The new style will be released with 7.10 (same as the others) and the main objective is to be AAA level on "Color contrast".
Now the thing is to know if @daniel-samson as already in place the system to manage fore and back color. And if actual styles are mature enough to create a new style for accessibility.

[daniel-samson]

Hi @horus68, that actually was a suggestion, we still need to fix the icons, to reach this goal. We could use the suitepicon font to replace the icons. We may be able to use the fill CSS property to fix some of the SVGs. So I have an idea of how we could make the themes more customisable for WCAG.

Also, I don't think we will be changing every color scheme to meet WCAG. WCAG is not a something we are focusing on for the 7.10 release. I am thinking we could increase the contrast in the dusk theme. Then at a later date, we can look at WCAG, as we should improve all areas of accessibility eg. helping screen readers correctly read the information on a screen/page.

[horus68]

@daniel-samson I was thinking just in one theme with a color contrast to meet WCAG.
That would be a temporary solution just for basic compliance: Then you could say: "this is color contrast compliance theme, the others are not. Feel free to choose!"
Later you will have the time to evolve the solutions and maybe others could bring some improvements.
That's why I would not change an actual style but duplicate one of them so it could evolve in time.
The theme description would be: "WIP for WCAG compliance"

[pgorod]

According to the discussion on the forums, actually "Day" was the closest to what they're looking for. I have tweaked this theme to be more high contrast - it doesn't look like something a Pro designer would do, but it looks good enough to give something to the most eager users while they have to wait.

I promise to do a Blog post in the coming week to explain how to customize a subtheme, and giving these specific higher-contrast fixes. I hope that helps for the coming weeks until something better comes along.

[horus68]

it doesn't look like something a Pro designer would do

That is the true and that is why we need a special theme just for color compliance (and later some other WCAG rules).
So maybe duplicate the "day" theme with a new name? New name should be also clear on the theme scope!
Would WCAG be a suitable name? Or just "Compliant"?
Hope english speakers will find a better name!

[pgorod]

I called it "Noon" because it was the time of day that was still available, and because at noon you have good light and you can see everything very well. At least in a sunny country like ours, though maybe not in Scotland ;-)

It's not Compliant, it's just more contrasty. The reason I say it doesn't look too good is because it takes a lot of work to tweak things consistently throughout the entire app, and I just did the quick fixes that affect most places. So the app is more contrasty in 90% of places, but looks a bit weird in other places. Other people can complete the work I started and improve on it, of course.

[horus68]

Go for it and make a PR!

[pgorod]

For the people looking for more contrasty colors, and desiring to further customize the colors, I put together a brief tutorial to get you started:

https://pgorod.github.io/Customize-SubTheme/

The article needs improvements, and the sample customized SubTheme needs _a lot_ of improvements, but this is what I had time to do for now, I hope it's useful and others can pick up where I left off.

[horus68]

@pgorod On the article: great work, only missing a printscreen! So you made the changes but also explained how it works (and I know its harder to explain others than to do it!!).
And what about a PR to github so this can be included here?

On the language string...(edited!)
Now added to crowdin!

[pgorod]

@horus68 sorry for the delay replying. I don't really think this is a PR for me to make - it's still too sloppy, and I don't think it belongs in an official release.

I wish I had gotten some feedback on it, either here or on the forums, but nobody said anything. Is it ok? Is it helpful? Is anybody improving on it?

Anyway I will try to talk to SalesAgility's designer to discuss what we learned in these threads regarding contrast. Maybe this can be improved in more places, but keeping only a handful of subthemes, and keeping them balanced by a designer, not hacked by a coder :-)

[Dillon-Brown]

Accessibility - WCAG color contrast [Request]

[Dillon-Brown]

I have moved this suggestion to Trello. All github issues that are labeled 'suggestion' will be moved to the new system and closed. Thanks for the suggestion!

Announcement of moving Suggestions:
https://suitecrm.com/forum/suggestion-box/13691-moving-suggestions-from-github-to

New SuiteCRM Suggestion Box
https://trello.com/b/Ht7LbMqw/suitecrm-suggestion-box

[horus68]

Noon Theme PR here: https://github.com/salesagility/SuiteCRM/pull/8459