Color & Type

Color Contrast

Color contrast is very important to legibility. To meet current accessibility standards, use only approved color combinations. Be sure to take special care with reverse type and type overlays, especially if your audience tends to be middle-aged or older.

Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to achieve Level AA compliance. To achieve Level AAA compliance requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

See Downloads for reference PDFs of both charts.

This chart "grades" various combinations of UCLA brand colors. UCLA's goal is to achieve Level AA or AAA compliance. The red "DNP" tags means a particular combination Does Not Pass — don't use those combinations

Color Tip: Avoid using color as the only way to convey information or display an error message. Use text or an icon as well.

Testing Contrast

For websites and other online media, use a web color contrast checker to assure that your work meets WCAG compliance.

• WebAim Color Contrast Checker
• WebAim Link Contrast Checker
• WCAG Color Contrast Chrome Extension

For printed materials, standards are not as easy to measure. Try a test print in black and white in order to observe contrast and legibility. Additional tips:

• Use a text/background color combination with stark contrast
• Use a non-glossy matte paper, white or off-white
• Double-sided documents should be printed on heavier paper

Color Tip: When creating a digital document (like a PDF), don’t rely on color alone to designate links, in case the document is switched to grayscale.

Type Considerations

In general, it’s best to take a simple and clear approach to your typography and font choices when you design, for digital or print. Whenever possible, test your choices with your audience at an early stage of development.

Web

• Use default system fonts on the web. The operating system will determine the typeface:
  • Helvetica (Mac OS, iOS)
  • Arial (Windows OS)
  • Roboto (Chrome OS, Android OS)
• Headlines should always convey the content hierarchy: think of your headlines and subheads as a content outline
• Use short copy and bulleted lists rather than big blocks of text. This is easier for all readers to scan and it improves accessibility for users who depend on screen readers
• Descriptive Interactive Text: Make sure that your interactive text, such as links, use descriptive language to signal the destination
  • e.g. “Learn More About Student Housing” instead of “Learn More”
• Legible Interactive Text: Make sure that your interactive text, such as links, stand on their own as clearly visible road signs for scrolling users
• Use Karbon for print, or Helvetica, Arial or Roboto for web
• 16px minimum for body type. Type can be resized without assistive technology up to 200 percent without loss of functionality (excludes captions and images with text)

Print & Documents

• Use 1.5 or 2.0 line spacing (when possible) for documents
• Page margins should be at least 0.5 on all sides
• Column spacing should be at least 0.5
• At least 12 point text (14 point when possible)
• 18 point text size for printed materials

General

• Left-aligned text is easiest to read
  • Use center-aligned text sparingly and only when text is fewer than three lines
• Limit the different styles of font used.
• Avoid using ALL CAPS as it is harder to read
• Use italics, bold, and underline selectively (avoid using for an entire paragraph)
• Avoid background textures, colors or graphics that make overlay text hard to read