Reading/Web/Accessibility for reading

The interface of Wikimedia projects must be easily accessible and readable, regardless of language or script. This includes both the majority as well as individuals with specific needs. The current typography on desktop and mobile makes readability difficult, though. Also, dark mode can be helpful in low-light settings and for users that prefer low-contrast reading environments. Our interfaces do not provide this functionality now.

We will introduce improvements in typography, and typographical as well as dark mode preferences. These changes will be available for both logged-in and logged-out users.

Why it is important to work on this
Over the past few years, we have introduced the Vector 2022 skin across wikis. The skin is designed to improve the reading experience, and provide an experience which is comfortable for existing users and more welcoming to new users. However, there are still issues with readability we have yet to address. During the research for that project, one of the issues with readability we recognized was the size of the text itself.

Compared to the more accessible digital text, it takes longer to read our content on desktop and mobile. The ability to remember text that was read is also affected. An important factor to keep in mind when determining what is optimal is that people engage both in in-depth reading, as well as scanning of text. We would like to improve our typography to take into consideration and optimize for both of these important ways of using the projects.

In addition, our desktop site does not allow for setting a font size that is comfortable for the user. Instead, readers with specific needs and preferences depend on browser functionality to alter font size. These capabilities vary by browser and are not always supported by the remainder of our user interface. This often causes issues with tools or navigation.

Annual Plan Context
"Ensure a quality reading experience for all users by adapting the default experience for 15% of pageviews, based on the individual needs and constraints of the user.

This KR (key result) is focused on allowing the opportunity for our interface to adapt to individual needs when necessary. The theory here is that people will feel more engaged with a website and interface that can adapt based on their needs. This can include work such as dark mode, text and page density, and font size customizations. Some of this adaptation can be done automatically by the interface – for example, creating responsive versions of a feature or tool, or ensuring that dark mode turns on based on the browser or device settings of the user. In other cases, this adaptation can be done through intentional customization – allowing users to select non-default states in specific (but limited) cases. From an accessibility perspective, it will focus on the features that need to be built as standalone to allow for more accessibility, or to allow for setting defaults that are more accessibility friendly, while leaving the opportunity for customization to users who have different preferences. To set the specific number "15%", we looked at how users adapt the default experience in the Wikipedia iOS app. 59% of users of the app are using a non-default theme (dark, black, or sepia). We used this number as a baseline, but factored in our assumption that it is more likely that habitual users of Wikipedia on the web take the time to adapt their reading experience, as opposed to sporadic users."

Project overview
As part of the accessibility for reading project, we will focus on two main initiatives:


 * 1) Improving the typography of the site and allowing users to set their preferred typography
 * 2) Introducing dark mode that users can opt-in to.

Typography improvements
The goals of this project are:


 * 1) To identify and better understand problems. Review and classify issues with the current typography on our sites
 * 2) To make the site easier to read. Improve readability on mobile and desktop sites
 * 3) To provide typography that better suits different languages and scripts. Optimize readability for multiple scripts and languages with the support and expertise of the communities
 * 4) To allow readers to customize typography. Introducing typographical preferences, useful mostly for people with distinct needs and preferences

Dark mode

 * 1) Improving the readability of articles in low-light settings
 * 2) Making dark mode options and settings easily discoverable and usable

Get involved & Contact



 * Promote and implement our recommendations: to make our changes available for everyone, community-controlled code like templates needs to be adjusted. This may require discussions on village pumps. This will definitely require many edits. Help by starting such discussions and making such edits.
 * Recommendations for dark mode friendly articles on Wikimedia wikis


 * Report bugs: to report a bug, create a task in Phabricator and add project.


 * Translate: help us translate related pages:

Earlier research and explorations

 * Literature Review: Readability and Optimal Text Settings
 * Typography: Apply consistent font sizes across Vector 2022 (T313828)
 * Hypothesis: Typographical and palette customizations (T341631)
 * Typography: Increased font-size design for Vector 2022 (T254055)
 * User research from Vector 2022 (Fifth prototype testing)
 * Fifth prototype testing reasoning (Fifth prototype testing#Font size)

Project evaluation
The success of this project will be measured by a combination of qualitative and quantitative methods. In particular, we will be looking at the following:


 * Research-supported decisions in prototype creation and development
 * Qualitative improvements in overall readability based on user testing and community conversations
 * At least X% of all sessions longer than Ys who customize typography
 * Note: exact variables TBD
 * At least X% of all sessions use dark mode
 * No significant change to reading depth