Low contrast in UI Options

[Cheetham, Anastasia]

Jan Richards recently pointed out that UI Options lacks a low-contrast option. I followed up with some questions around what that might look like. Here are his answers:
 

> Can you recommend any particular colour values?

I used your question as an excuse to read up on this.... :)
This is an excellent resource: http://www.tader.info/ 

One of the places it points are some sample user CSS here:
http://www.w3.org/WAI/RD/2012/text-customization/r14#dick

The exact values are in a paper behind a pay-wall, but I colour-sampled them and got:
1 Dark gray (#222222) on lime (#FAFEFA) = contrast: 15.6:1 (NOT low contrast)
2 Light (#A8A49B) on dark brown (#413936) = contrast: 4.5:1
3 Dark (#301E1C) on light brown (#AB9B79) = contrast: 5.8:1
4 Light (#BDBDBB) on dark gray (#343434) = contrast: 6.6:1
5 Yellow on Black (UIOptions has already) = contrast: 19.6:1 (NOT low contrast)

> Is grey scale a common preference? If so, can you recommend particular greys? If not, is there another combination?

Not that I have seen. A lot of the low contrast examples I've seen tend to use earth tones, but I should note that Wayne Dick's personal preferences may be over-represented.

An interesting thing to try out would be whether there could be two contrast sliders...a "foreground brightness" and a "background brightness". By adjusting them the user could invert the colours but also set a darkness "floor" and a lightness "ceiling".

> Are there any other changes that would typically be desired at the same time? For example, with high contrast, we might include extra emphasis on links, as well as the colour choices. Anything you can think of for low contrast?

I think the extra emphasis on links would help here as well. Other things to consider:
- ability to tighten margins for people with narrowed visual fields (in some cases their acuity is just fine)
- putting borders around blocks of text and headers - this delimits things, especially at high magnifications

There are lots of other text display characteristics listed here, some of which UIOptions already does: http://www.tader.info/display.html

Another idea:
- The two-slider control idea might also work for Text-Size.... a "smallest text" slider and "largest text" slider that could be used together to make sure text was not below a certain size but also that heading text did not grow to a ridiculous size. Unlike the foreground/background brightness controls, these wouldn't be able to cross.

Some useful links:
http://www.hgrebdes.com/colour/spectrum/colourvisibility.html
http://hslpicker.com/#04c
http://www.w3.org/WAI/RD/2012/text-customization/ 
http://www.badeyes.com/myths-about-low-vision/#more-369 

-- 
Anastasia Cheetham     Inclusive Design Research Centre
acheetham at ocadu.ca           Inclusive Design Institute
                                        OCAD University