When implementing Accessibility support in an app, it's very important to be sensitive to the contrast in images. As I wrote in Chapter 17 of my book:

Technically speaking, high contrast is defined by the W3C as a minimum luminosity ratio of 4.5 to 1. A full explanation including how to measure this ratio can be found on http://www.w3.org/TR/WCAG20-TECHS/G18.html. A Contrast Analyzer (from the Paciello Group) is also available to check your images (some of mine in Here My Am! failed the test). Do note, however, that creating high contrast graphics isn’t required for non-informational content such as logos and decorative graphics. At the same time, full-color graphics might look out of place in a high contrast mode, so be sure to evaluate your entire end-to-end user experience under such conditions.

The contrast ratio is what you need when you want to make high-contrast graphics that are still in color–this is what I had to do with the Here My Am! graphics. The original ones I received from Microsoft Press, which I use for "standard" contrast, look like this:

widetile.scale-100_contrast-standard

Running the two colors (#FFFFFF and #00B294) here through the contrast analyzer, I'm told that it's ratio is only 2.69:1. So in a graphics editor (I use the free Paint.NET), I tweaked the Value portion of the HSV to proportionally darken the teal color down to #005C36 which gives an 8.13:1 ratio:

widetile.scale-100_contrast-high

This is well beyond the 4.5:1 ratio, and passes all the test of the Contrast Analyzer. (I could have used #00663B which is a touch brighter and passes at 7.09:1). I use this as the high contrast image (color).

Then I needed to make black on white and white on black variants. The easy way to do this in Paint.NET was to first convert to grayscale, then use the Levels adjustment. For black on white, I converted the original (standard contrast) image to grayscale and inverted the colors:

widetile.scale-100_gray1

Then I used the Adjustments > Levels command to set the input levels at 0 and 128 with outputs at 0, 1.0, and 255:

levels

 

This created black on white (light border added):

widetile.scale-100_BonW

After this, another Adjustments > Invert Colors command produced the white on black:

widetile.scale-100_WonB


Comments are closed