Learning to customize Tumblr themes often serves as an introduction to learning the basics of web design and designing spaces that can be accessed by many different types of users. However, I’ve noticed that while many of the custom Tumblr themes I’ve encountered on blogs are designed with aesthetics in mind, they often are not designed with usability or readability in mind, which can be frustrating for users with low vision. Here are my tips for how to make Tumblr themes accessible for low vision, from the perspective of someone who actually has low vision.
First, how to customize Tumblr themes
To customize a Tumblr theme from your dashboard, follow these instructions:
- Open the Tumblr menu and go to the Blogs section
- Select the Edit Appearance option
- Select the Edit Theme option
- Choose a new theme within the Browse Themes menu, or customize existing theme
Related links
Ensure that the text color and background color provide good contrast
I’ve seen a lot of custom text color and background color combinations on Tumblr mobile and desktop themes that have been impossible for me to read. While I know aesthetics are important when creating a Tumblr theme, it’s better to choose colors that provide good contrast and are easy to read without having to strain the eyes. While some eye conditions require different color contrast optons, general examples of color combinations that provide good contrast include:
- Black text with white background
- Yellow text with black background
- White text with black background
- Yellow text with blue background
- Black text on a pastel background
Another option for improving text contrast on dark backgrounds is to add a white outline around black text so it is more readable against different backgrounds. This can be done with the CSS text outline property- I have linked a tutorial below from another website and go into more detail about adding custom CSS to Tumblr themes later in the post.
Related links
- Colored Paper and the Readability of Text
- Choosing High Contrast Color Schemes For Low Vision
- CSS Text Outline | Examples on How Text Outline Works in CSS (educba.com)
Choose 1-2 colors for a background image
Background images that feature small patterns, tiled images, or ornate designs are often hard to focus on, especially when the backgrounds of posts are highly transparent. It’s better to choose 1-2 solid colors for a background image, a simple low-contrast pattern, or a gradient effect to ensure the posts are the focus of the blog.
Related links
- Choosing The Best Custom Video Backgrounds For Low Vision Audiences
- Black Or White: Choosing Dark Mode For Low Vision
Avoid using too many emoji or special characters in the blog title
While text written in another language can be read by screen readers, blog titles with a lot of emoji or special characters can be difficult to navigate for a few different reasons:
- Fancy text with lots of extra embellishments can be difficult to distinguish for people with low vision, and screen readers may not recognize the characters or text
- Screen readers read information one line at a time, from left to right. While having blank space is not an issue, adding random characters or randomly spacing out words can be hard to understand
- Large amounts of emoji can be difficult to distinguish and may be hard to focus on, and screen readers will read every single emoji that’s in a social media post or username- so five cake emoji will read as “cake cake cake cake cake”
One option for users who want to display several emoji or special characters in a blog title is to set an image of the title as the header image and set a pinned post to display an image description of the header (like in an introduction post).
Related links
- How To Make ASCII/Emoji Memes Accessible For Visual Impairment
- How Do People With Visual Impairments Use Emoji?
Choose print-disability friendly fonts
Cursive and handwriting style fonts can be difficult for people with low vision or other print disabilities like dyslexia to read, but luckily Tumblr has a few different fonts that are print disability-friendly and look great with a lot of themes. Some of my favorite print disability-friendly fonts available on Tumblr include:
- Avalon
- Calluna/Calluna Sans
- Helvetica
- Sim Hei
- Square Serif
Users can also install a tool called XKit to access Tumblr blogs on the web with the OpenDyslexic font, though I’m not aware of any way to set OpenDyslexic as the font for a blog theme.
Related links
Disable infinite scrolling
This is not a blog setting that can be customized within a lot of themes, but it is an option for users to enable/disable on their own. Infinite scrolling is generally considered inaccessible for people with disabilities because it can be difficult to track information on the screen when using a screen magnifier, screen reader, or an alternative input device.
To disable infinite scroll on Tumblr:
- Open the Tumblr menu and select Settings
- Click on the Dashboard option
- Under the Interface section, select the slider to disable infinite scrolling
Related links
If possible, use a single-column layout
A single-column layout presents all blog content in a single vertical column typically in the center of the screen. This is the easiest layout to access for users with low vision and for users in general, as it is easier to magnify information and focus on text, and content appears larger on the screen.
Add custom CSS for improved accessibility
Cascading Style Sheets, also known as CSS, describe how HTML elements are to be displayed on the screen, paper, or in other media. I think of adding CSS to my website as being like making my bed, as I add sheets and covers to make my bed look nicer and more comfortable to use. There are several different options for creating custom CSS, and I recommend the W3Schools website for learning more about CSS.
To add custom CSS to Tumblr:
- Open the Tumblr menu and go to the Blogs section
- Select the Edit Appearance option
- Select the Edit Theme option
- Select the Advanced Options button
- The custom CSS section is underneath the Advanced Options menu
Related links
Other tips for how to make Tumblr themes accessible for low vision
- Make sure to add alt text to images when posting them- see my posts on How To Add Alt Text to Social Media and the Alt Text tag linked in the first section
- Users can increase the font size of their theme in the Theme Options menu
- To change the dashboard color palette, open the Tumblr menu and select the Change Palette button
- Another option for making Tumblr posts more readable is to add the phrase “/embed” without the quotation marks to a post URL
