Skip to Content

Resizing Text for ADA Compliance

You've poured your heart into your website copy. This simple text resizer can help ensure that your website visitors can easily read those words.

Your website speaks volumes -- literally. While there are still debates within various industries as to how much copy should live on each page, the average website page contains 350+ words. And when some websites contain hundreds of pages, it’s crucial that each page have easily-readable content. What’s the point of writing that content if your website visitors can’t actually see it?

This tutorial makes your website more accessible for everyone who might struggle with seemingly ‘standard’ sized text. While Arial 12 pt font might be easy to read for your youthful team of web developers, it might not work for a visually impaired user or an older website visitor. By adding a few more text options to your website, visitors can quickly adjust fonts to a size that best suits their needs. Thus, they’re more inclined to stay on your website. Not only can they read more about your product or services, but they’ll take note of your courtesy. Even if a website is mobile responsive, it doesn’t necessarily mean that the text is mobile responsive to meet the needs of visually impaired users.


Some simple Bootstrap markup to emphasize the text size changes.


The CSS here helps with ADA Compliancy, as well as specifies the sizes of the changing text by targeting text within the font size classes.


Some JavaScript code gives the body the classes it needs to target the text within. A class to the body allows for functionality throughout the website, without bloating the HTML with class changes to each element.

Want to see how this functionality could look on your site before you invest the time in coding? Try it out first in the JSFiddle below!

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev
Solodev Logo

©2024 Solodev. All rights reserved worldwide.