Use Dark Text on Plain, High-Contrast Backgrounds

Classification:
[x] Standard

Categories:
[x] Accessibility/508
[x] Headings, Titles, & Labels
[x] Text & Style
[x] Things to Avoid

Standard:

HHS must use black (preferable) or other dark text on a white or off-white background when presenting text information—including headers, captions, and prose text—on Web pages. 

Rationale:

Research studies consistently show that dark text on a plain background elicits reliably faster scanning and reading performance than on a medium-textured background. When compared to scanning or reading light text on a dark background, people read black text on a white background up to thirty-two percent faster. In general, the greater the contrast between the text and background, the easier the information is to scan or read.

Sources:

Boyntoin and Bush, 1956; Bruce and Green, 1990; Cole and Jenkins, 1984; Evans, 1998; Goldsmith, 1987; Gould, et al., 1987a; Gould, et al., 1987b; Jenkins and Cole, 1982; Kosslyn, 1994; Muter and Maurutto, 1991; Muter, 1996; Scharff, Ahumada and Hill, 1999; Snyder, et al., 1990; Spencer, Reynolds and Coe, 1977a; Spencer, Reynolds and Coe, 1977b; Treisman, 1990; Williams, 2000.

Exemptions:

Background shades of color may be used in text boxes, panels, tabs, and other elements of a Web page.  There must be high contrast, however, between the text (foreground) and the background.  You must select color combinations that can be discriminated by users with color deficiencies/color blindness.  You may be exempt from this requirement in sites targeted to children, youth, and other groups with demonstrated specific needs and requirements.  In using colored backgrounds, though, readability must be maintained, especially for individuals with low vision, via contrast between text and background colors.

You may wish to use these resources:

• Colour Contrast Check (Jonathan Snook, Snook.ca)

This tool allows you to specify foreground and background colors to determine if they provide enough contrast.

• Contrast Checker (Q42)

The contrast checker tool enables you to compare the contrast in a web page.

• Making Text Legible: Designing for People with Partial Sight (Lighthouse International)

Basic guidelines for making effective legibility choices that work for nearly everyone. 

Requirements (content & style): N/A

Related Standards:
Font Size and Typeface

Related Guidelines:
Use Black Text on Plain, High-Contrast Backgrounds (V2, 11:2, p. 102)

Checklist:
Use dark text on plain, high-contrast backgrounds.