Photo of Jamie & Lion

The personal site of Jamie Knight, a slightly autistic web developer, speaker and mountain biker who is never seen far from his plush sidekick Lion. View the Archive

Topics: Autism Development

Responsive Contrast

Something which came up in work today was a discussion about contrast standards and responsive web design.

Do we need to consider different standards regarding contrast once we start thinking about users beyond the desktop?

The WCAG guidelines provide guidence on contrast. At the BBC we aim for AAA compliance but will take AA when AAA is not possible for some reason. However, when considering responsive design (sepecifically mobile) i am increasingly thinking that going for the higher contrast standard is a good thing.

Typically mobiles and tablets tend to have quite shiny screens. This is great for making colors pop but introduces issues around glare and brightness. A shiny screen such as the iPhone uses a powerful backlight in order to reduce reflections and glare. Even then sometimes (direct sunlight, brightness turned down) the screen can be hard to read.

Try turning the brightness on your phone or tablet way down and then using it in different places and at different times. While the low brightness works great in the dark evening, the following morning walking outside it renders the device unusable.

Using higher contrast helps to reduce this issue and keep the site more usable more of the time.

(Photo from: AnandTech iPhone 4 review)

Published: 10 July 2012 Permalink

Comment

  1. Henny Swan · Jul 11, 08:49 AM ·

    Hi Jamie,

    Good to see a post about RWD and accessibility! And good catch on the colour issue as this is a tricky one.

    When it comes to contrast I’m not convinced that WCAG is what we should be referencing for mobile and tablet simply because all devices are different as well as quite different from the desktop web.

    Having said that there is no research (that I know of) that nails what good contrast on mobile and tablet is, or, better yet, provides a baseline.

    The Mobile Web Best Practices attempted to do this in their Default Delivery Context which defines a baseline for colour, fonts, image formats, CSS etc in order to allow content providers to share a consistent view of a default mobile experience. For colour contrast the DDP states a 256 Colors, minimum (see: http://www.w3.org/TR/mobile-bp/#ddc).

    Again I think this is fairly out of date and understandably so given that fast pace of the mobile market. So where does that leave us?

    At BBC I recommend that we reference WCAG AA as a starting point but also refer back to device specific guidelines where they exist. Nokia for example covers contrast.

    This is not ideal but is a starting point. It would be great if we could do some research on this as feedback like yours is super useful.

    Also one small correction. BBC doesn’t recommended WCAG 2.0 Triple A for contrast but Double A: http://www.bbc.co.uk/guidelines/futuremedia/accessibility/colour_contrast.shtml#contrast

  2. Jamie + Lion · Jul 11, 08:43 PM ·

    Heya Henny,

    Thanks for your post. Interesting reading! I think its going to take some time for a good contrast measure to come up. I will go take a look at the nokia documentation. It would be interesting to conduct testing but giving the broad range of devices and users this could “at best” be a guide / vauge reflection. Interesting though!

    While the BBC as a whole aim for AA, in Radio and Music we try to go one step further (triple A) whenever possible. The logic is something along the lines that setting a higher gaol and missing will result in more consistently meeting lower targets! I would be interested in your thoughts on this, i was sure i had mentioned it to you in the past!

    Thanks for the comment :D

    Jamie + Lion

  3. Henny Swan · Jul 12, 10:12 AM ·

    I like the logic of aiming higher than Double A. The BBC standard remains the same when it comes to QA but if we con go a notch further all the better. It’s a good approach all round.

Your Comment