I frequently get questions from other bloggers and website owners about how I make my website accessible for readers with low vision and other print disabilities. As an assistive technology specialist with low vision, I wanted to ensure that my own website reflects the same accessibility principles I write about, and that readers can access my content without needing to rely on additional tools or browser extensions.
Back in 2020, I released the first version of this post highlighting the CSS changes I made to improve accessibility on my website. I have updated the post as I have made changes on my site, and wanted to give it a makeover for 2026 to reflect my current CSS implementation and share additional accessibility tweaks I’ve added since the original post. While this is by no means a complete listing of all CSS accessibility techniques or everything on my website, here is a list of CSS accessibility tips I used for my website that can help make content easier to read for people with low vision, double vision, and other print disabilities.
What is CSS? How do I add it to my website?
Cascading Style Sheets, also known as CSS, describe how HTML elements are to be displayed on the screen, paper, or in other media. If HTML is the content of a website (the words, images, and structure), then CSS controls how that content looks.
I like to think of HTML and CSS like sheet music; the notes on the page are the content (HTML), but the formatting choices (the size of the notes, the addition of dynamics, how many measures on a page) are like CSS. Just as I create large print versions of my sheet music so I can read it more easily, I use CSS to control the font size, line spacing, and colors of my website so that it’s easier for readers with low vision to access.
Related links
- How To Improve Your Blog Theme For Visually Impaired Users
- How To Make Tumblr Themes Accessible For Low Vision
- My Favorite Web Browser Extensions For Low Vision and CVI: Reducing Visual Fatigue
- Tips For Reading Music On An iPad With Low Vision
CSS custom properties for consistent styling
At the beginning of my CSS style sheet, I use CSS custom properties (also called CSS variables) to define all of my typography settings in one place. This makes it easy to maintain consistent styling across the entire website and quickly adjust values if needed. All of my font sizes, line heights, and colors are defined at the root level.
Code to implement
:root {
--font: Arial, Helvetica, sans-serif;
/* Desktop sizes */
–text-base: 2.5rem;
–text-sm: 2rem;
–text-nav: 4rem;
–text-h1-post: 4rem;
–text-h1: 3rem;
–text-block: 5rem;
–text-widget: 3rem;
/* Mobile sizes */
–m-text-base: 1.5rem;
–m-text-sm: 1rem;
–m-text-nav: 1.5rem;
–m-text-h1-post: 2rem;
–m-text-block: 2rem;
/* Line heights */
–lh-body: 2.0;
–lh-heading: 1.75;
–lh-mobile: 1.5;
/* Colors */
–color-text: #000000;
–color-bg: #ffffff;
–color-border: #000000;
}
Using CSS custom properties means that if I ever need to change the base font size or line height, I only need to update it in one place rather than searching through hundreds of lines of CSS to update every line. For people with visual impairments that are writing CSS style sheets, this is one of the most impactful CSS accessibility tips that can help with keeping information organized.
Text-alignment: Left
When I first started my website, I used a justified text alignment. Justified text is spaced so that both the left and right edges of each paragraph line up evenly with the margins, creating a block-like appearance similar to columns in a printed newspaper. This effect is achieved by adjusting the spacing between words (and sometimes between letters) so that each line stretches to fill the full width of the text container.
The problem is that justified alignment creates uneven gaps between words, and when text is magnified or viewed on narrow screens, these gaps can form distracting vertical channels of white space running down the page, which makes it difficult or impossible for readers to track from one word to the next, especially for people with dyslexia, cognitive disabilities, or low vision.
After I made the change to left text alignment, I realized how much easier it was to read information on my own website, and could not believe that the first version of my website was so difficult to read with low vision; I even had trouble reading it! I’m very grateful to everyone who shared CSS accessibility tips with me over the years.
Code to implement
.post,
.page {
text-align: left;
max-width: none;
overflow-wrap: break-word;
}
The overflow-wrap: break-word property ensures that long words or URLs will break and wrap to the next line rather than overflowing the container, which is especially helpful on mobile devices.
Related links
- A to Z of Assistive Technology for Reading Digital Text
- My Most-Used Keyboard Shortcuts For Academic Writing
Adjusting line-height on pages and posts
As someone with double vision as well as low vision, it is helpful for me to have additional spacing between lines so that the lines don’t appear to run into each other. I use a line height of 2.0 (double spacing) for body text and 1.75 for headings. On mobile devices, I reduce the line height slightly to 1.5 to balance readability with screen space.
Code to implement
.post p,
.post ul,
.post ol,
.page p,
.page ul,
.page ol {
line-height: var(--lh-body);
font-size: var(--text-base);
overflow-wrap: break-word;
}
.post h2, .post h3, .post h4,
.page h2, .page h3 {
line-height: var(–lh-heading);
font-size: var(–text-h1);
overflow-wrap: break-word;
font-family: var(–font);
text-transform: none;
}
Using CSS variables like var(--lh-body) instead of hardcoded values makes it easy to adjust the line height across the entire site by changing a single value in the :root declaration.
Related links
- How I Take Math Tests With Double Vision
- How To Create An Accessible Formula Sheet
- Reading VitalSource eTextbooks With Low Vision
- Adapting Page Layouts: Math Problems and Low Vision
Defining headings
While this technically isn’t implemented in the “Additional CSS” section of my website like these other CSS accessibility tips in this post, defining headings is an extremely important part of making an accessible website, especially for screen reader users. Headings help to break content up into sections so that users can easily navigate a document or page and read/skip over different parts as needed. I use Heading 2/H2 tags for each section of my blog post, and Heading 3/H3 tags for subsections, including related links from my website. I also style my headings to be large and in bold print, with different sizes for post titles versus page titles.
Code to implement
.post h1 {
line-height: var(--lh-heading);
font-size: var(--text-h1-post);
overflow-wrap: break-word;
font-family: var(--font);
text-transform: none;
}
.page h1 {
line-height: var(–lh-heading);
font-size: var(–text-h1);
overflow-wrap: break-word;
font-family: var(–font);
text-transform: uppercase;
}
.post h2, .post h3, .post h4,
.page h2, .page h3 {
line-height: var(–lh-heading);
font-size: var(–text-h1);
overflow-wrap: break-word;
font-family: var(–font);
text-transform: none;
}
Post titles (H1) are set to 4rem while other headings are set to 3rem, creating a clear visual hierarchy. Page titles use uppercase text transformation to distinguish them from blog post titles.
Related links
- Make Online Learning Accessible For VI Students: Quick Start Guide
- Designing Accessible Documents With Microsoft Word
- Global Accessibility Awareness Day: Activity Ideas for Students
Using larger font sizes
My visual impairment makes it impossible to read standard-sized print, so my website naturally has larger font sizes so that users with low vision (or just people who aren’t wearing reading glasses) can read content more easily. However, users can also resize text by zooming in on the website, or using the Ctrl++ shortcut if they find that they still need a larger font. I use rem units throughout my CSS so that font sizes scale proportionally with browser settings; this is one of my favorite CSS accessibility tips for designing responsive websites.
Code to implement
/* Desktop sizes */ --text-base: 2.5rem; --text-sm: 2rem; --text-nav: 4rem; --text-h1-post: 4rem; --text-h1: 3rem; --text-block: 5rem; --text-widget: 3rem; /* Mobile sizes */ --m-text-base: 1.5rem; --m-text-sm: 1rem; --m-text-nav: 1.5rem; --m-text-h1-post: 2rem; --m-text-block: 2rem;
body {
font-family: var(--font);
background-color: #ffffff;
}
.post p,
.post ul,
.post ol,
.page p,
.page ul,
.page ol {
font-size: var(–text-base);
}
The base text size of 2.5rem (approximately 40px at default browser settings) is significantly larger than typical website text, making content much easier to read without requiring magnification.
Related links
- Make Android Easier To See With Large Print Apps
- File Formats For Low Vision and Print Disabilities
- Five Myths About Print Disabilities
Font-family: Arial, Helvetica, sans-serif
My favorite font from a readability standpoint is Arial, as I prefer sans-serif fonts and I like that I can tell the letters apart easily. Arial is a web-safe font and pre-installed across devices, so my website looks consistent across multiple displays. I include Helvetica and a generic sans-serif as fallbacks to ensure consistent rendering on all systems.
Many website themes and blog themes offer integrated Google Fonts support, which can offer even more options for accessible fonts. One example of an accessible font for low vision available on Google Fonts is Atkinson Hyperlegible, which was developed by the Braille Institute.
Code to implement
:root {
--font: Arial, Helvetica, sans-serif;
}
body {
font-family: var(–font);
}
By defining the font family as a CSS variable, this ensures that every element on the site uses the same font stack, creating a consistent reading experience.
Related links
Dark mode support
Many readers with low vision find it easier to read light text on a dark background, especially in low-light environments. My website automatically detects the user’s system preference and switches to a dark color scheme when dark mode is enabled. This is implemented using the prefers-color-scheme media query, and I share most of the exact code that I use on my website below.
Code to implement
@media (prefers-color-scheme: dark) {
html {
background-color: #111 !important;
}
body {
color: #ffffff !important;
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff !important;
}
a, a:hover, a:visited, a:active, a:focus {
color: #ffffff !important;
}
.entry-content p a,
.page-content p a {
color: #c9b8f0 !important;
}
.navbar-default {
background-color: #000 !important;
border-color: #fff !important;
}
.form-control,
input[type=”text”],
input[type=”email”],
input[type=”password”],
textarea,
select {
background-color: #2a2a2a !important;
border-color: #ffffff !important;
color: #ffffff !important;
}
/* Invert images for dark mode */
.frontpage-slider,
.entry-thumb img,
.entry-content img {
filter: invert(1) !important;
}
.entry-content .do-not-invert {
filter: invert(0) !important;
}
}
Links within content are styled with a light purple color (#c9b8f0) to distinguish them from regular text while maintaining sufficient contrast. Images are automatically inverted to match the dark theme, but images with the .do-not-invert class retain their original colors.
Related links
- Choosing Between Light Mode and Dark Mode For Low Vision
- How To Use Invert Colors With Low Vision
- Exploring Accessible Color Palettes For Low Vision
Mobile responsiveness
Reading on mobile devices presents unique challenges for users with low vision. I’ve implemented comprehensive mobile styles that adjust font sizes, line heights, and layout to ensure the website remains readable on smaller screens. This design is also helpful for people with low vision who may not necessarily need large print.
Code to implement
@media (max-width: 767px) {
/* Prevent horizontal scrolling */
body {
overflow-x: hidden !important;
}
/* Adjusted text sizes for mobile */
.post p,
.post ul,
.post ol,
.page p,
.page ol,
.page ul {
line-height: var(–lh-mobile);
font-size: var(–m-text-base);
overflow-wrap: break-word;
}
.post h1 {
line-height: var(–lh-heading);
font-size: var(–m-text-h1-post);
overflow-wrap: break-word;
font-family: var(–font);
text-transform: none;
}
.post h2, .post h3, .post h4,
.page h2, .page h3 {
line-height: var(–lh-mobile);
font-size: var(–m-text-base);
overflow-wrap: break-word;
font-family: var(–font);
text-transform: none;
}
/* Full-width content */
.site-content,
.content-area,
#primary,
.entry-content,
[class*=”col-“] {
width: 100% !important;
max-width: 100% !important;
padding-left: 5px !important;
padding-right: 5px !important;
box-sizing: border-box !important;
float: none !important;
}
/* Hide sidebar on mobile */
#secondary,
.widget-area {
display: none !important;
}
}
On mobile devices, the base font size reduces from 2.5rem to 1.5rem, and line height reduces from 2.0 to 1.5. The sidebar is hidden to maximize content width, and all content areas expand to fill the full screen width. Users can adjust the font size further by either setting a preferred font size within their mobile web browser or configuring page zoom. Another option is to use reading views or a simplified reading display to further customize the appearance of text.
Related links
- Customize Microsoft Edge Accessibility For Low Vision
- Mainstream Technology and Low Vision: Smartphones
High contrast colors
High contrast between text and background is essential for readers with low vision and is one of the most underrated CSS accessibility tips. My website uses pure black text (#000000) on a pure white background (#ffffff) in light mode, and white text on a near-black background (#111) in dark mode. This provides maximum contrast for readability.
Code to implement
:root {
--color-text: #000000;
--color-bg: #ffffff;
--color-border: #000000;
}
html {
background-color: #ffffff;
}
body {
font-family: var(–font);
background-color: #ffffff;
}
hr {
margin: 0;
border: 0;
border-top: 3px solid var(–color-border);
border-bottom: 3px solid var(–color-border);
background: transparent;
border-radius: 0;
}
Horizontal rules use thick 3px borders to ensure they are visible to users with low vision.
Related links
More CSS accessibility tips for low vision
- I love using custom CSS to improve readability wherever possible, including on search engines like Kagi. Check out my Kagi low vision theme at My Experience Using Kagi Search With Low Vision
- Interested in teaching CSS or another scripting/programming language to someone with a visual impairment? Read Pre-Teaching Programming Languages To Visually Impaired Students
- Want to learn more about my post graphics and how I design my website? I recommend reading How I Optimize My Website For Cognitive Accessibility
- Sometimes, I have to modify the CSS of websites I use in my classes so I can read them with large print. I share more about this in How I Use WebAssign With Low Vision
Published June 12, 2020. Updated May 2026