Home About Contact

Text Palettes

Samples of readable text/background color combinations according to World Wide Web Consortium (W3C) guidelines.1

Text is the primary communication and entertainment medium in the tildeverse. Whether we are playing at a shell or surfing hand-crafted Web pages, the view is usually dominated by text.

Color is an important part of the text experience and can make the difference between delight and pain when reading a screen. The right colors can set a mood or theme for a program or site. The wrong colors can cause physical discomfort and drown out the message the text is trying to communicate. But of the 275 trillion possible combinations of text and background color, which are the right ones?

Color Combination Sample Charts

216 Color Palette
The old "web safe" color palette. Although color safety is no longer an issue, the palette provides a large selection of colors and readable color combinations.
8 Color Palette
A simple palette generated by combining red, green, and blue at either full or zero intensity. The resulting palette is smaller than that supported by the original PC CGA graphics standard.

Readability Criteria

The pages linked above contain sample charts of combinations of text and background colors judged readable one of the following criteria:

  1. WCAG 2.0 AAA: Web Content Accessibility Guidelines 2.0 Level AAA readabilty requires a contrast ratio between foreground and background color of 4.5:1 or greater.
  2. WCAG 2.0 AA: Level AA readability requires a contrast ratio of at least 3:1, and is acceptable for large scale font sizes.
  3. WCAG 1.0: Although it has been superceded by WCAG 2.0, Web Content Accessibility Guidelines 1.0 proposed a color readability criterion based on the hue difference and brightness difference of the foreground and background colors.

Sources

Caldwell, Cooper, Reid, & Vanderheiden (2008). Web Conent Accessibility Guidelines (WCAG) 2.0. World Wide Web Consortium. December 11, 2008. <http://www.w3.org/TR/WCAG20/> accessed January 12, 2015.

Hall, Richard H. Color Combinations and Readability. Missouri University of Science and Technology. <http://web.mst.edu/~rhall/web_design/color_readability.html> accessed January 12, 2015.

Luminosity Colour Contrast Ratio Analyser. Juicy Studio. <http://juicystudio.com/services/luminositycontrastratio.php> accessed January 12, 2015.