Choosing and assessing colour combinations throughout IMatch

[ColinIM]

A Preliminary Note:
In IMatch 5, Mario has given us enormous flexibility to set and to adapt the foreground colours (colors) and the background colours (in some contexts) on many elements of its User Interface.  For example we can assign our own colours to keywords and to Categories, and a recent discussion thread (Formating Variables) showed how we can set the colour of text on our thumbnail panels.

The Problem:
Given all this freedom in IMatch to assign literally any combination of foreground colours and (in some cases) background colours, it can be a long slow, iterative process to test one foreground/background colour combination, then to re-think it, test it again, re-think it again etc., etc., ...

One Solution:
I can thoroughly recommend this (free) little utility program called Colour Contrast Analyser (see below), from Steve Faulkner at The Paciello Group, Europe.

The main purpose of this Colour Contrast Analyser tool is to help assess and to choose optimal colour combinations when designing web pages - or when designing anything else - when those web pages will be viewed by people with less than perfect eyesight.  I include two further web links below to other related websites which expand on this very wide and (to some) already well known topic of Accessibility and web design.

And ... of course ... in our context here in IMatch, this Colour Contrast Analyser is also perfect (IMO) for helping us rapidly choose and find the most comfortable and feasible combinations of coloured text (etc.) on different coloured backgrounds.  It provides separate foreground and background eyedropper tools with which we can 'select' any existing colour on any part of our system, or we can choose to "go psychedelic" with the infinitely-variable Red, Green and Blue sliders.  For example, we could 'eyedrop' on the background colour on an IMatch thumbnail to set our starting-background, and then easily use the 'Foreground' sliders to experiment with 'workable' foreground colours to see how they appear on that background.

But enough words from me. This tool is blissfully easy to use (see my quick screen-grab attached) and it can speak well for itself.

Here's the link:

Colour Contrast Analyser version 2.2a
http://www.paciellogroup.com/resources/contrastanalyser/

And (incidentally) The Paciello Group, Europe are here:
http://www.paciellogroup.com


Related websites:
These next two websites expand (a lot!) on the "human accessibility" context for which this Colour Contrast Analyser tool was primarily designed:

Web Content Accessibility Guidelines (WCAG) 2.0 - W3C Recommendation 11 December 2008
http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast

10 colour contrast checking tools to improve the accessibility of your design
http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/


Some Other Notes:

1. This Colour Contrast Analyser returns Clipboard-accessible RGB colour values in the order RED then GREEN then BLUE.
For example, a red colour is given as #FF0000 and a blue colour is given as #0000FF

These #RGB values are ready to copy+paste into most (or all?) of IMatch's "colour value" fields.
(I invite any corrections or updates on this point from others, thank you.)

2. Search in IMatch's very extensive Help system to see many examples of the use of colour values like these.
For example, search on the IMatch | Help | Search tab for "formatting XAML" (then choose "Formatting" from the search result-list).

3. Each time we run this Colour Contrast Analyser program, it opens with those superbly flexible Red, Green and Blue sliders "tucked away" out of sight, so we need to pop into the program's Menu each time, to reveal them as they appear in my attached screen-grab.

(Edited later to add ...)
4. On the lower part of the Colour Contrast Analyser program's window (as it appears on my attachment) we can see "Pass" and "Fail" notices. These are hints to the designers (to us!) that the combinations of foreground and background colours would be rated as "good" or "no good" if we were aiming to comply with the "accessibility" guidelines described in those "Related Website" links above.  These hints are of course helpful to us too, but in our context here inside IMatch, you can choose to heed the Pass/Fail hints, or - if you really like your zany colours - to ignore them ... !

Happy experimenting   

Colin P.

[attachment deleted by admin]

[Richard]

This site also has a means of mixing various combinations of text and background.
http://www.w3schools.com/html/html_colornames.asp

[ColinIM]

Thank you Richard.

I've now re-discovered another web-based utility (first launched around 2005 and which still works perfectly!), from a writer on web development topics, called Jonathan Snook.

Colour Contrast Check
http://snook.ca/technical/colour_contrast/colour.html

This is now my own favourite tool for assessing colour combinations because it gives immediate feedback on a representative background-coloured box with coloured-text, and it even includes "Hue" and "Saturation" sliders along with the expected R, G and B sliders.  (It cleverly combines "RGB" and "HSV" colour-space controls.)

Colin P.

[sinus]

Thank you Richard.

I've now re-discovered another web-based utility (first launched around 2005 and which still works perfectly!), from a writer on web development topics, called Jonathan Snook.

Colin P.

This is really cool and helpful. We can "imitate" very easy for example the colours of the thumb-envirement and so on.
Thanks.

[steve_a_o]

I am new to this forum. So please forgive me if I have done something wrong. The software suggested is terrific and I am now using it. However, I would like to know if there is some way to make "Background color" 'ON' the default value instead of 'Off'?
Steve in Montreal