Color Scheme & Contrast

An important aspect of color for both low vision and color blind users is that the there be sufficient contrast in lightness and darkness between the foreground (text or graphics) and the background.

Many modern color schemes can have too low a contrast, but minor adjustments in the color values can enhance contrast while preserving the original design intent. You can use the Juicy Studio Color Contrast Ratio Analyzer or the Web AIM Color Contrast Checker to verify appropriate contrast settings.

Read more about color contrast accessibility.

Examples: Original vs. Altered Color Schemes

Below are examples of an original color scheme which was relatively low contrast and adjusted versions.

Note: A scheme which passes the AA level is acceptable for text larger than 18 pixels or bold face text larger than 14 pixels. This level is appropriate for headers and navigation labels with larger text sizes.
A scheme which passes the AAA level can be used in most contexts. A scheme which fails at all levels should be avoided.

Color Scheme Original (Fail) Revised, Pass AA Revised, Pass AAA (Full)
Gray Text on
White Background

Text Color: #999999

Background Color: #FFFFFF

Text Color: #666666

Background Color: #FFFFFF

Text Color: #555555

Background Color: #FFFFFF

Cyan (Link) Text on
White Background

Text Color: #00CCCC

Background Color: #FFFFFF

Text Color: #007777

Background Color: #FFFFFF

Text Color: #005555

Background Color: #FFFFFF

White Text on
Pale Green Background

Text Color: #FFFFFF

Background Color: #82C1B4

Text Color: #FFFFFF

Background Color: #3F8076

Text Color: #FFFFFF

Background Color: #2D635B


Blue Text on
Pale Blue Background

Text Color: #0077AA

Background Color: #99CCEE

Text Color: #005588

Background Color: #BBDDFF

Text Color: #004499

Background Color: #DDEEFF

No TrackBacks

TrackBack URL: https://blogs.psu.edu/mt4/mt-tb.cgi/100177

Leave a comment

Search