Clear, readable text is foundational to digital accessibility. Factors such as font choice, appropriate font size, and using styles for emphasis all contribute to legibility. High color contrast between text and background ensures visibility, while thoughtful line spacing and left alignment support easy reading. Structuring content in manageable chunks and maintaining an accessible reading level further help users process information efficiently, making digital content truly inclusive.
Use the guidance and best practices below to improve the accessibility of your digital content.
Certain fonts are easier to read than others. Accessible fonts do not slow down reading, including for individuals with blindness, vision loss, or reading disorders such as dyslexia. Choosing clear, simple, unembellished fonts with appropriate size, color, and contrast improves readability for everyone and helps reach a wider audience.
When selecting a font for digital content, sans-serif fonts (i.e. Aria, Verdana) are generally considered more legible than serif fonts (Times New Roman). The excluded "feet" (or embellishments) of serif fonts provide better character recognition and improve readability and compatibility with assistive technologies.
To further improve readability, choose a font where the reader can easily distinguish between a capital O and the number zero, and a lowercase "L" and capital "i as in the word "Illusion".
Font Size
A good baseline for body text is at least 12 points. Always consider the specific typeface, device, and audience, and prioritize content that is presentable and readable across different devices and screen resolutions.
Minimum font size recommendations:
- Digital text: 12-point or larger
- Headings: 18-point or larger
- Presentations: 24-point or larger
White Space
White space (or negative space) is another crucial element in digital accessibility. Adequate spacing around blocks of text, between paragraphs, and even within lines helps reduce cognitive overload and makes content easier to scan and process. For readers with dyslexia, visual processing challenges, or attention difficulties, generous white space can prevent crowding and allow each line and word to stand out more clearly. Well-designed white space not only enhances visual comfort but also supports users of screen magnifiers, who benefit from clear separation between interface elements as they navigate through content.
Live Text
Images of text can be inaccessible, while live text is easier to access. For example, this sentence is live text, but a screenshot would not be. With live text, readers can:
- Increase the zoom level without pixelating the text
- Apply custom styles for legibility
- Resize and reflow content to fit their preferred device
- Copy and paste
When possible, avoid using images of text unless it's essential, for example, in a logo.
Enlarged Text
Font size can be adjusted in web browsers either by modifying browser preferences for a permanent change or by using the zoom feature for temporary adjustments.
Desktop web browsers have built-in functionality that enables users to zoom in:
- In Windows browsers: Ctrl and plus (+)
- in Mac browsers: Command and plus (+)
- To zoom out, use the same keystrokes with the minus key.
Browsers typically maintain page proportions during zooming, causing the content size to change while the layout remains fixed. This may lead to horizontal scrolling, which can affect readability. As an alternative, some users choose to increase only the text size instead of enlarging the whole page.
Page content must remain readable when users adjust their browser’s font size or zoom settings.
To avoid loss of content when text is enlarged, utilize responsive design to adjust page layouts for different screen sizes. Using percentages for sizing and placement instead of pixels can improve flexibility. Constraining the height of containers with text is generally avoided so that the container can expand to accommodate changes in text size.
As a best practice, use left-aligned text. English readers follow lines from left to right and top to bottom. Aligning text to the left side of the page assists neurodivergent and low-vision readers. Left alignment creates a vertical line at the page edge, providing a consistent starting point for each line.
Centered text presents a new starting point for each line, which could negatively impact tracking and comprehension. It is generally applied to short headings or brief passages such as pull quotes or image captions. Mixing centered and left-aligned text within the same context may affect readability.
Justified (or “full justification” or “block”) alignment forces text to align with both the left and right margins. Originally used in letterpress book printing to create clear columns, it can now sometimes cause more confusion than clarity.
Selecting font and background colors with sufficient contrast is vital for supporting individuals with vision loss and reading disorders, as well as improving readability and comprehension for the broadest possible audience. By prioritizing accessible color choices, the author fosters inclusivity and makes their information easier to perceive and understand.
When following templates and styles, be aware of automatic changes that may need to be revised (i.e. hyperlinks).
Required Contrast Ratio
The minimum standard ratios for color contrast are:
- AA Standard: 4.5:1
- AA18 Standard: 3:1 or higher for 18-point text or 14-point bold text
Color Contrast Checkers
Use these free online tools to assist with verifying your color choices meet the minimum requirement for contrast:
The Auburn Brand
Utilize these resources to review Auburn's branded colors:
WCAG 2.1 Success Criteria
The color contrast issues described in this section map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:
-
1.4.3 Contrast (Minimum) (Level AA)
-
1.4.11 Non-text Contrast (Level AA)
-
1.4.4 Resize Text (Level AA)
-
1.4.5 Images of Text (Level AA)
-
1.4.10 Reflow (Level AA)
-
1.4.12 Text Spacing (Level AA)
