Ryan Lewis Ben Haggerty

Tumblr Accessibility UI Update Toggle

This is a userscript for Greasemonkey/Tampermonkey that will disable the new UI update by default, and add a toggle to re-enable/disable it in your Dashboard settings page.

Everything is reverted to how it was before the update and there’s no delay on page load.

Make sure you have Greasemonkey or Tampermonkey installed on your browser, it is needed to be able to load the script.

Install the script from here:

Why?

Because there’s no delay on page load.  …which means there’s no brief flash of the dark background and saturated icons.

Some time ago we took a long, hard look at how we stacked up to the recommendations outlined in the Web Accessibility Initiative of the World Wide Web Consortium. This is the initiative that sets standards for accessibility for people who may need assistance using the internet. It outlines steps to take and tools to use to create as seamless of an experience online as possible, whether you have auditory, visual, or neurological disabilities, are using a limited device, are on a slow connection with limited bandwidth, or…well, a whole bunch of other reasons.

The result of that long, hard look? Not great. We needed to make sure Tumblr was accessible to anyone who wants to use it.

Over the past few weeks we’ve been making changes to do just that. Our inaccessible menus are more accessible, we fixed our poorly described elements, and increased overall readability. You can read more about all that in our most recent @javascript post about the mobile web.

Part of making Tumblr more accessible involved upping the color contrast in our UI, most notably on the dashboard and everywhere else that familiar blue touches. The light grays and muted blues had a contrast ratio of 2.02:1. What does that mean? Bad. It was bad, and we needed to do better by people with visual impairments.

Enter your new dashboard:

It looks…cleaner, doesn’t it? Like someone dusted off the poorly accessible bits. The blue is darker, the grays are lighter, all the buttons and icons are brighter with our new brand colors, and it has a contrast ratio of 7.87:1 What does that mean? Good! Very good.

The switch to your brand new, higher contrast, less dusty dashboard has been slowly rolling out this week. If you haven’t seen it yet, you’ll get it sometime in the next few days.

A note: We know that this color change on the dashboard negatively impacts the beautiful bluespace art so many of you have created over the past few years. Seeing these older posts lose the utilization of the dashboard—something that made them so special and unique to just Tumblr—is certainly not a great feeling. There’s no way around that. We hope, however, that this change only means newer, more bluespace art will be created, and that this time around it will be easier for everyone to experience.

[ID: Screenshot of a color contrast checker with the previous color as the background, and white as the foreground. The contrast ratio is 9.58 to 1, and it passes.]

This was the previous color.

[ID: Screenshot of a color contrast checker with the new color as the background, and white as the foreground. It has a ratio of 17.64 to 1, and it also passes.]

This is the current color.

I’m not visually impaired, so I won’t comment on whether one is better than the other in that regard, but it is extremely triggering for my conditon.

If Tumblr wanted to make its website more accessible, it would add a better (and functioning) way to add captions to photos. It would make the background color and text size/font on it’s website easy to toggle. It would fix its inaccessible login page.