Font (Face, Size and Color)

ISSUE:

Whether it is merely personal preference or necessitated by a visual impairment, individuals may view pages using fonts or color schemes other than those originally intended. The grouping or conveying of information through the use of font face, font size, or color alone may be difficult or impossible to access for individuals who are color-blind, screen-reader users, individuals with low-vision, users of some hand-held devices, and individuals using a monochrome display.

The use of fixed font sizes, in an attempt to maintain the appearance and layout of a page, May prevent some users from being able to access the information. Visitors should be able to vary the size of the display font and have the information remain clear and accessible.

Increasing the font size alone may be inadequate for some users with low-vision. The contrast between text and the background should be significantly high at all color depths. Check your colors using different browsers and platforms.

STANDARD:

Do not use font face, size or color alone to convey information.

Specify font sizes in relative rather than absolute units.

EXAMPLE:

Style sheets allow font-size to be defined in a number of ways. Specifying font size in ems rather than pixels is the preferred method for web accessibility, as it is relative to the user's default font size.

CORRECT	INCORRECT
Font-size: 1.5em	font-size: 12px

Optimal text and background combinations for individuals with color vision anomalies:

TEXT	BACKGROUND	SAMPLE
Black	White	Black on White
White	Black	White on black
black	Yellow	Black on Yellow
Yellow	Black	Yellow on Black

Color combinations that should be avoided:

TEXT	Background	SAMPLE
Blue	Black	Blue on black
Purple	Black	Purple on black
Red	Black	Red on black
Green	Black	Green on black
Green	Red	Green on Red
Red	Green	Red on Green
Red	Blue	Red on blue
Blue	Red	Blue on Red
Yellow	White	Yellow on White
Orange	White	Orange on White
White	Yellow	White on Yellow