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 options, 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
- Paper Colors And Low Vision
- High Contrast and 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
- Choosing Device Wallpapers and Backgrounds With Low Vision
- Choosing Between Light Mode and 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
- Emoji and Low Vision
- Zine Accessibility and Low Vision
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
- XKit GitHub page (external link)
- My Favorite Free Fonts For Print Disabilities
- How To Use Hover Text For iPad With Low Vision
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
- Digital Accessibility and Chronic Pain
- How I Optimize My Website For Cognitive Accessibility
- Avoiding Flashing Lights On Social Media
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
- Six CSS Accessibility Tweaks I Made For My Website
- A to Z of Assistive Technology for Reading Digital Text
- How To Improve Your Blog Theme For Visually Impaired Users
Other tips for how to make Tumblr themes accessible for low vision
- Adding alt text to images makes them accessible to screen reader users. Learn more in How To Add Alt Text On Social Media and How To Write Alt Text and Image Descriptions for the Visually Impaired
- Users can increase the font size of their theme in the Theme Options menu. For mobile users that would like to custom the font size for their Tumblr app, I recommend checking out Customize Accessibility Settings For Specific Apps
- 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. This may also help with using Simplified Reading Displays and Low Vision or Free Digital Bookmarking Tools For Low Vision
Published August 4, 2020. Updated September 2024