Basics
- Pages should be resizable up to 200% with no loss of legibility or functionality.
- For ASU sites, use Arial and relative font sizes.
- Avoid small fonts, and limit styles like bold and italics.
- Ensure sufficient contrast between text links and text and between text and the background.
- Don't rely on color alone to convey information. Use secondary cues.
- Avoid text in images.
In-depth
Improving the legibility of your content means more people will be able to read and understand it. People with low vision often need to increase the size of text so they can read it. Many people have difficulty distinguishing certain colors or colors with low contrast. Users with some cognitive impairments have difficulty reading long lines of text, and 80-character lines have been shown to be the most legible for all users.
Text resizing (zoom)
Pages should be resizable up to 200% without assistive technology with no loss of legibility or functionality. Using responsive layout design and relative font sizes (see "Fonts" below) allows pages to be more easily resized.
Legibility
Fonts
- Font choice: ASU web standards require the Arial on all ASU web sites. (For print, please use Neue Haas Grotesk.) See more about ASU brand standard fonts and typorgraphy.
- Relative font sizes: Use relative font sizes, which allow text to be resized and improve legibility. Relative font sizes ensure that a page's font size is inherited from the browser. The default text size for most browsers is 16px. Therefore, setting your font size to 1em essentially means you are setting it to 16px for most users, except for those who need larger font sizes and have adjusted their browser default.
- Font size: Small fonts are difficult to read for those with low vision and should be avoided.
- Font styles: To improve legibility, use the following sparingly: italics, bold, all capitals, justified text and decorative fonts. Never underline text unless it’s a link.
- Text color contrast ratio: The visual ratio between text and background colors should be 4.5:1. ASU web standards require websites to use font color #2a2a2a for text and #fff for the page background, which is a ratio of 14.35:1--enough to meet level AAA requirements.
- Link color contrast ratio: Text links should have 3:1 contrast between the link text color and the surrounding non-link text color. (See more on Color and Contrast.)
- Secondary visual cues: Don't rely on font color alone to visually convey important information. If font color transmits something meaningful on a page (such as a link), provide a secondary method to communicate the information (such as underlining). (See more on Color and Contrast.)
- Text graphics: Use actual text whenever possible, rather than graphic text. Text in images cannot be seen by search engines, screen readers and other assistive devices. (See Images: Graphic Text.)
Text blocks
- Line length: The line length of content text should be no more than 80 characters or glyphs. Especially for people with some cognitive disorders, longer line lengths cause users to lose their place while reading.
- Justification: Studies have shown that content text that's left-justified is more legible.
- Line spacing: For optimum legibility, line spacing (leading) should be at least 1.5 within paragraphs, and spacing between paragraphs should be at least 1.5 times larger than the line spacing.
How to test
Text resizing
The best way to check that text can be resized without loss of content or diminished layout functionality is to display a website in a browser and increase the size of the text only to 200%. You should be able to read everything on the page.
In Firefox go to View > Zoom, then check "Zoom Text Only." Press Ctrl and + six times to get to 200% zoom level.
If you do not have access to Firefox:
- Internet Explorer: View > Text size > Largest will increase the text size, but not to 200%. You can increase the entire page size (Page > Zoom > 200%) and check text, but this may not be fully accurate.
- Chrome: You can increase the entire page size and check text, but this may not be fully accurate. Press Ctrl and + six times to get to 200% zoom level.
Other typography tests
Manually check line-length, line-spacing, justification, use of font styles and graphic images. See Color and Contrast testing techniques.
Relevant W3C WAI documents
- WCAG 2.1 Guideline 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
- How to Meet WCAG 2.1 Guideline 1.4.4
- WCAG 2.1 Guideline 1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text.
- How to Meet WCAG 2.1 Guideline 1.4.5
- WCAG 2.1 Guideline 1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following:
- Foreground and background colors can be selected by the user.
- Width is no more than 80 characters or glyphs (40 if CJK).
- Text is not justified (aligned to both the left and the right margins).
- Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
- Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
- How to Meet WCAG 2.1 Guideline 1.4.8
