MyPage: A Chrome Extension for Dyslexia

Levi Villarreal
3 min readFeb 4, 2018

--

A picture from ~midnight at HACKTX 2017

Fall 2017 marked my first semester as a computer science student and consequently, my first Hackathon. Hackathons are coding competitions where teams compete to build something amazing in a short amount of time, in this case, 24 hours. This results in copious amounts of code, unhealthy amounts of junk food, and minimal sleep. HACKTX is held annually in Austin TX and was held at the Omni Hotel this year.

As soon as the competition started, my team started brainstorming ideas that we could build for the competition. We soon settled on the idea of accessibility, as we were all interested in making technology better for everyone, regardless of any disabilities or disadvantages. One thing we focused on in particular was dyslexia.

Those with dyslexia have a harder time comprehending text than those without. And this doesn’t just extend to books, newspapers or magazines. Researchers have found that reading comprehension speed for those with dyslexia is the same when reading text on an electronic screen as it is for printed text. If you account for the variations in text color, background color, and font on nearly every webpage, it often becomes the case that reading content on the internet is harder than in print.

The Solution

MyPage preferences

The Mypage chrome extension allows the user to set their preference for three parameters, font, font color, and font background. Pressing ‘Go’ changes all of these settings on the page that the user is currently on. The text preview section allows the user to type in whatever text they want to see what it looks like before they press ‘Go’.

An example of the MyPage extension in action

Although the layout of the page may look ugly to some, this color and font combination has been shown to speed up reading comprehension for those with dyslexia, which is much more valuable to some than thin text and color palettes.

Feedback

I was able to complete this project during HackTX, and demo it to a series of judges. One comment from a judge really stood out to me as an example as to why this extension could have a real impact. The judge said that as a child, he was diagnosed with severe dyslexia, which made it incredibly hard for him to read anything. However, one technique that he used in school was to put a projector slide with a green tint in front of the text he was reading, and that would enable him to read much more confidently. Using my extension, I was able to replicate this effect digitally, which just showed how the techniques used in print could easily be used digitally.

Download it! Edit it!

To download it on the Google Chrome Web Store, go to this link. Also, if you are so inclined, feel free to fork this project on Github, or just take a look through the source code.

The extension has many problems right now and could be greatly improved with a few changes. If there is any sort of demand for this extension, please submit some feedback as to what you would like to see changed or added in future versions!

Conclusion

This project taught me how to work on a very tight schedule and how to work with technologies that I had no prior experience using. Before I started this project, I had no idea how to make a chrome extension and learned the basics from scratch. I hope to attend more Hackathons this year, and definitely will not stop actively writing code for accessibility.

--

--