Skip to main contentSkip to section navigation
Web Style Guide

Accessibility

When considering type, the main accessibility issues are size and color. These attributes come into play for users who have vision disabilities such as low vision or color blindness. Vision-impaired users need to be able to transform text that they find illegible into a format that they can read. Low-vision users need to be able to increase the type size and set the text and page background colors for maximum contrast. Colorblind users also need control over text and background color. You need to pay attention to the following type and layout attributes to accommodate users with vision disabilities.

Scalable text

Users cannot easily enlarge text that is set using absolute size values, for example, text sized using pixels (see Type size). To ensure scalability, use relative units such as the em unit to control the typography — type size, margins and indents, leading — on the page. Use text graphics sparingly, and always offer a text-only equivalent. Text rendered to graphic form is no longer text but image and cannot be manipulated — enlarged, colored — as plain text can.

Structural markup

Text formatting done using presentation-style markup instead of style sheets limits users' ability to transform a layout to meet their needs. Some browsers have a feature that allows users to override author-defined style sheets with their own style sheet. This means that users can define a custom style sheet that meets their viewing needs. For example, a low-vision user might define a style sheet that renders all <P> text at 24 points, or a colorblind user might set the background to white and the text to black for maximum contrast. But these measures will not work, or will only work partially, on pages that are formatted using presentation markup. If text color is set using <FONT COLOR> and headings are set using <FONT SIZE> and <B> for emphasis, the user-defined style sheet will have nothing to apply itself to (no paragraph or heading tags). If you set presentation properties using style sheets, users who need to customize the page can do so.

Emphasis

If you use color alone to achieve typographic emphasis, users who cannot distinguish the colors will miss the emphasis. To emphasize text — for example, in headers or key phrases within text — so that it won't be overlooked, use bold formatting as well as color. (Indeed, colored text for anything that is not a link is a potential usability flaw that you might as well avoid altogether. See Colored text, above.) Also be sure that there is sufficient contrast between the background and text on your page. Although contrast is particularly important for vision-impaired users, all users will benefit from greater readability.

Adaptable layouts

Most Web page layouts are not designed with large type in mind. For example, fixed layouts that limit the text column to a specified width are typically sized to accommodate 12-point type or smaller. Indeed, at large type sizes a fixed text column may contain only a few words, which makes the text awkward to read. For adaptable pages, use a flexible layout that transforms gracefully to accommodate larger type sizes. (For more on fixed and flexible layouts, see Page Design, Page layout.)