Using Headings Properly - Dec 17th, 2009
Within your web pages the correct use of headings is very important for two main reasons: 1) To signpost your content for your users, and 2) To help with search engine optimization (SEO).
Instagram Accessibility Reduced by New Design
Published: | No Comments
Reading Time: 6 minutes
The Instagram app has changed
The new Instagram icon shows up OK on my Android phone.
The Instagram app design has changed recently – as many of you will have noticed. The new app icon certainly made me wonder where Instagram had gone on my Android phone for a while. But also, apparently the new Instagram feed order has arrived for some.
There have been many posts about the changes – some critical. See The Guardian, Mashable, Adweek, and The Next Web on Twitter. There’s even a petition to Keep Instagram Chronological.
But this post is not about the icon, nor about the feed order.
I want to talk about something else that (so far) I’ve not seen any mention of elsewhere – the accessibility of the new design. And it’s not good news.
The new design
Right after the new version of the app arrived on my phone, I noticed the changes to the colour scheme. I wasn’t totally happy.
Suddenly it was a lot harder for me to use the app in certain places – like outdoors, and I quickly realised why. Gone are the darker backgrounds behind the navigation and tools icons – replaced with a brilliant white background instead.
Now if all the icons were really clear with good colour contrast, this wouldn’t matter so much. But they’re not.
But it’s not all bad news. In my opinion, there are a few improvements.
Let’s compare
Let me show you some comparisons of the old and new versions. As I didn’t have the foresight to take screenshots of how Instagram was a week ago, I’ve had to track down some screenshots on Google. If I’ve used your screenshot and you’re not happy, please let me know and I will remove it. I’ve blocked out any personal details in the screenshots of the previous design – hence the blur in places.
Profile and feed view
Profile page – previous design
Profile page – new design
Not many changes here to the main part of the screens. But look at the icon strip at the bottom.
The background for the icons is now white whereas before it was a dark grey.
In the new design, the icon showing the current view is dark grey and there is plenty of colour contrast here. However, the other icons are all light grey. Not surprisingly the colour contrast here falls well short of the minimum contrast levels demanded by the WCAG2 Accessibility Guidelines.
In the old design, all the combinations used easily pass the required colour contrast guidelines.
It also seems as though the icons have become smaller – although I can’t be 100% certain of that. This would obviously make them less easy to see.
Accessing the tools and filters
Now I’d like to show you some screenshots of the filters and tools you can use when you’re adding a photo.
The filters
Filters – previous design
Filters – new design
You’ll notice that the selection of tools and filters has been separated in the new design – accessed via a kind of tab panel control at the bottom. This is probably a good thing as the previous screen was a bit busier.
But sadly, once again, colour contrast is poor, with the names of the filters being presented in light grey on the white background. Only the name of the currently applied filter has sufficient colour contrast against the white background. The blue FILTERS text to label the current view only scrapes past the WCAG2.0 contrast requirements, as the text is larger. The small underline to emphasise the selection using more than just colour is a good feature although it is quite subtle.
Once again, all aspects of the previous design satisfied colour contrast requirements.
As well as the colour change, the filter name font size seems to have been reduced too – although I can’t be 100% certain on that. Readability is reduced though, irrespective of the font size.
The edit tools…
Instagram tools – previous design
Instagram Tools – new design
Much the same here in relation to colour contrast – the light grey on white background fails the contrast test.
That actual tool icons might be bigger but it’s hard to be certain.
Fine control of the edit tools
This pair of screenshots show the interface when fine tuning of the various edit tools is taking place – in this case the Highlights.
Adjusting highlights in the previous design
Adjusting highlights in the new design
Here I do like the addition of CANCEL and DONE instead of ticks and crosses. Using words instead of shapes means that the purpose is clearer for everyone – and so improves accessibility.
In terms of pure colour contrast, this seems to be the only place where the previous design does not meet the necessary contrast values – with the -66 figures. So neither the old or the new designs are great there.
The actual slider itself has more colour contrast in the newer design, but does it look as draggable?
Colour contrast, mobile devices and Instagram accessibility
What WCAG2.0 says
Using a mobile in sunshine – not always an easy experience.
So far in this post I’ve talked about the WCAG2.0 colour contrast requirements and how the previous Instagram app design was better. But the WCAG2.0 specifications were defined at least 6 years ago – at a time when mobile usage for accessing websites and taking and sharing photos was still in its infancy. They were written firmly with desktop and laptop use in mind.
The colour contrast requirement is based on an algorithm which calculates a contrast figure from the RGB values of any colour – comparing the foreground and background colours. The WCAG2.0 requirement is for a minimum contrast ratio of 4.5:1.
Is it enough?
So are the WCAG2.0 contrast definitions enough for smaller screen devices that are often used in fluctuating light conditions? in daylight? on a sunny day?
Some people believe not. Henny Swan is a Senior Accessibility Specialist for the BBC in the UK. She has been instrumental in developing a revised set of Mobile Accessibility Guidelines for the BBC. In her blog post introducing the draft version of the mobile accessibility guidelines she suggests that figure should be more like 7:1 for apps and websites for mobiles.
My message to Instagram
I understand the desire and the perceived need for a refresh and a redesign. A redesign is always going to cause pain and inconvenience for some, but as long as the redesign offers progress then it can be justified, and it’s worth people having to spend time getting used to it.
But your redesign is not a forward step in my view. For me, the reduced colour contrast on key functional screens just make the app much harder to use in daylight – impossible for some people probably. And the outside is a place where the majority of Instagram posts are surely made. So the new design has compromised Instagram accessibility in my view.
I’m a fifty-something accessibility specialist and occasional developer, with less than perfect eyesight, and I like to share on Instagram. Please don’t tell me I’m outside your demographic.
Ready for more accessibility? Try this
Share this page (Links open new windows/tabs)
There are no comments yet - would you like to leave one?
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Text for Screen Readers Only (Updated)
Next post: Street Accessibility for the Blind in Vienna (Video)
