High Contrast Theme

One good idea from MODXpo Cologne was to establish a high contrast theme for MODX manager, which will be possible in Revo 2.3. jpdevries said he is just about to figure it out.

I split this thread from the general insights thread https://forums.modx.com/thread/87452/insights-from-modxpo-cologne#dis-post-481671. So please, any new comments on high contrast theme come here. [ed. note: BrigitteB last edited this post 11 years, 4 months ago.]

In high contrast mode you often use white on black, as Dan told us. A reverse color scheme is easily applied on text, but icons are often an issue. We should provide different icon sets, say a dark one and a light one. Can this be done in Revo 2.3?

Hello folks,

With my particular condition, a black (or a very dark colored) background with white (or a very light color) text is essential for me to see anything on a computer screen. If I use a standard white background and black text, the whole screen looks white. I can barely make out a line of text that looks like a line, and can not see any of the letters due to the glare of the white background.

A bit about my settings:

I utilize Debian with a component called Compiz installed. Compiz has two settings that I utilize heavily. It has a tool called Enhanced Desktop Zoom which allows me to magnify or zoom in my desktop. I also utilize the Negative setting which allows me to reverse the color scheme of a window or my entire desktop easily.

I utilize Iceweasel (Debian version of Firefox) with a customized color scheme. I also utilize Chromium in a standard format and just use the Negative tool in Compiz to reverse the color scheme of that particular web browser. Most of my work in the MODx manager is done in Chromium so that I can see the icons and such easily.

For Firefox, if you go in and edit the Preferences, click on the Content box toward the top of the pop up, then click on the colors button on the right side toward the middle of that section, there is where I "hard set" Firefox to use specific colors. For the background, set it to black, for the text set it to white. Make sure to have the two boxes that indicate to use system colors and allow pages to set their own colors are not checked. Apply these changes and see what your pages look like now.

The one thing about these settings in Firefox is that if any elements utilize a graphic as a background image, you will not see them. If you look at the MODx manager, it is a totally different experience. This is why I utilize Chromium with a standard color scheme and use the Negative option in Compiz.

I have attached screen shots of what I see in each browser as I use the manager along with a normal shot.

With the settings in Firefox, take a look at some popular websites such as Twitter, Facebook, Google results, etc. You will be able to see where buttons may have an outline, or you may not see anything at all.

I bring this up only to point out how folks with visual impairments see the web. It is a much different and sometimes frustrating experience. However, being able to adapt and find what works is essential to being able to carry out everyday tasks on the Internet.

Having different icon sets would be a very neat feature to say the least. Also being able to customize the Manager easily would be a huge help.

Now, to switch gears from high contrast, there are folks that need to utilize a low contrast color scheme as well such as shades of grey, blue, etc. I know this thread is geared more for the high contrast theme specifically. I talk to some folks that utilize a low contrast color scheme and give feedback for those folks as well in a different thread.

Right now, I am working on a project to overhaul the site of the school where I got my guide dog. One of the new requirements is to make sure the site is ADA (Americans with Disabilities Act) compliant. So we are making sure that folks can magnify the text along with the ability to change the color scheme. I am still gathering requirements and will be building the new site utilizing MODx Revo.

I apologize for the lengthy reply. Hopefully this info is more help than confusing. I get very excited when folks ask how they can help make things easier for folks like myself with vision issues.

Dan

One last thought about why I have Firefox set they way I do. if you look at Twitter with the settings as I have them set, all the pics look normal. If I utilize Compiz to just set the window to a negative color scheme, all the images and people look like, well...a negative! This way, I can see images as they were intended.

I apologize for the lengthy reply. Hopefully this info is more help than confusing. I get very excited when folks ask how they can help make things easier for folks like myself with vision issues.

Hi Dan,

Don't apologize for any lengthy response.. For a most of us, we can only guess as to what would work well for you. Any insights you can offer and honest feedback as this develops is extremely helpful. Plus, when people are working on something that they know in the end will greatly help make people's lives better, it really gives people a sense of satisfaction.

Regards,
Tom

Quote from: BrigitteB at Nov 04, 2013, 07:55 PM

In high contrast mode you often use white on black, as Dan told us. A reverse color scheme is easily applied on text, but icons are often an issue. We should provide different icon sets, say a dark one and a light one. Can this be done in Revo 2.3?

If I understood Ryan right, (nearly) all the icons in the manager will be replaced with FontAwesome, which is just a normal webfont including vector-icons as characters, so that they appear in the same color the whole text is - and could be colored easily with css in any way you like. So that shouldn't be a problem

Thanks for posting this. Just landed after my 30hr trip back to Portland from Germany. Will read up on it in a bit

Dan,
thanks a lot for this detailed description of your tools and settings. Very impressive to see how many different approaches you take. To summarize: your MODX Manager should show white text and icons on a black canvas, but the pictures should have their original color. Right?

What about text enlargement, do you use just your Compiz tool, or do you add browser zoom?

Quote from: cookie_monster_az at Nov 05, 2013, 02:40 AM

The one thing about these settings in Firefox is that if any elements utilize a graphic as a background image, you will not see them. ... With the settings in Firefox, take a look at some popular websites such as Twitter, Facebook, Google results, etc. You will be able to see where buttons may have an outline, or you may not see anything at all.

Yes. Hopefully we can avoid this in future versions of MODx Manager, so that people may take advantage of their personal color settings on OS or browser level.

Quote from: cookie_monster_az at Nov 05, 2013, 02:40 AM

Now, to switch gears from high contrast, there are folks that need to utilize a low contrast color scheme as well such as shades of grey, blue, etc.

Thank you for pointing this out. Nothing is more complex than low vision.

Quote from: cookie_monster_az at Nov 05, 2013, 02:40 AM

I know this thread is geared more for the high contrast theme specifically. I talk to some folks that utilize a low contrast color scheme and give feedback for those folks as well in a different thread.

Feel free to do as you see fit. To me, "High Contrast Theme" is just pars pro toto, an expression I picked up from the folks in Cologne, much more graphic than "low vision issues". We shall sort this out as we go.

Quote from: cookie_monster_az at Nov 05, 2013, 02:40 AM

I apologize for the lengthy reply. Hopefully this info is more help than confusing. I get very excited when folks ask how they can help make things easier for folks like myself with vision issues.

No need to apologize. Thank you once again for sharing your insights.

Brigitte

This is good news:
Quote from: vamporio at Nov 05, 2013, 08:06 AM

If I understood Ryan right, (nearly) all the icons in the manager will be replaced with FontAwesome, which is just a normal webfont including vector-icons as characters, so that they appear in the same color the whole text is - and could be colored easily with css in any way you like.

As you said, font-based icons can be styled and scaled any way you want, and, best of all, you won't put them in the background, so no problem with personal color settings.

Could we apply this to the RTE as well? TinyMCE? Redactor?

This is fantastic stuff. Thanks for sharing everybody.

Quote from: vamporio at Nov 05, 2013, 08:06 AM

Quote from: BrigitteB at Nov 04, 2013, 07:55 PM

In high contrast mode you often use white on black, as Dan told us. A reverse color scheme is easily applied on text, but icons are often an issue. We should provide different icon sets, say a dark one and a light one. Can this be done in Revo 2.3?

If I understood Ryan right, (nearly) all the icons in the manager will be replaced with FontAwesome, which is just a normal webfont including vector-icons as characters, so that they appear in the same color the whole text is - and could be colored easily with css in any way you like. So that shouldn't be a problem

Yes this is true. Not all of the icons have been converted yet, but the plan is for them all to be. This should allow them to look sharp on high resolution displays as well as be re-colored easily and scaled up.

Unfortunately as far as I know the current Manager doesn't handle upscaling text through the browser very well as at a certain point the layout begins to break. It is true that custom themes can have custom layouts, but I don't see being able to improve significantly in this area until 3.0.

In the process of beginning this high contrast theme (which I've named interverse), I'm discovering areas of the Sass files for the default theme that need either further abstractions or to be made variables in the hopes that all one would need to do to create a simple custom theme is duplicate the default and update _colors-and-vars.scss. I'll post here when further progress is made and things are up on GitHub.



[ed. note: dinocorn last edited this post 11 years, 4 months ago.]