Skip header information, go directly to content

mwas standard Standard 4 -- Contrast.
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on black and white screen.

Examples:
4.1 -- Blue on Blue, using different saturations of the same color for background and foreground.

Contrast -- Dos and Don'ts

See also: Standard 3 -- Color.

Do Don't

Use high contrast colors.

Use similar text and background colors (e.g. light grey on dark grey; light blue on dark blue).

Why: Two colors that contrast sharply to someone with normal vision may be far less distinguishable to someone with a visual disorder. It is the contrast of colors one against another that makes them more or less discernible rather than the individual colors themselves.

How: Don't assume that the lightness you perceive will be the same as the lightness perceived by people with color deficits. You can generally assume that they will see less contrast between colors than you will. If you lighten the light colors and darken the dark colors in your design, you will increase the visual accessibility.

Get more help with contrast color, visit Lighthouse International.

See what your pages look like to a users with different levels of colorblindness. Process your pages through the Colorblind Web Page Filter.

previousPrevious Nextnext

Top of Page || Return to Index
View/print in PDF format. (Acrobat Reader required.)
Ohio State University