UX Guidelines for Vendors

Updated 29 January, 2018

CFA Institute follows WCAG 2.0 AA accessibility guidelines. Learn more about WCAG.

Link to or download the CFA Institute Sketch Library.

Readability

  • Most text should be 18 px or larger. No text should be smaller than 16 px.
  • All text should meet a minimum contrast standard of 4.5:1. Brand colors with good contrast (WCAG safe) are noted in the brand color palette below.
  • Text should never be displayed over an image.
  • Color should not be the only means of conveying information.
    • For example, an error message should use both an icon and the color red to indicate an error state. Color alone should not be used.

Accessibility

The accessibility of a site can be tested using WebAIM's WAVE tool. Note that a browser extension is available for evaluating unpublished sites.

  • HTML should be semantic and follow display order, so that a web page can be read by screen readers.
  • The page should be navigable by keyboard.
  • Images should have meaningful alt text.
  • Text should never be embedded in an image, with the exception of logos and purely decorative images.
  • Video and audio content should offer a text transcript.

Usability

  • Use plain language and clear calls to action.
  • Errors should be prevented when possible. Error messages should be specific and actionable.

Compatibility

We officially test and support the following browsers:

  • Most recent version of Chrome
  • Most recent version of Firefox
  • Internet Explorer 11+
  • Most recent iPhone and Android browsers

Mobile First

  • Websites should take a mobile-first design approach.
  • Websites should be responsive, so that they display well on desktop, tablet, and mobile devices.

Performance

  • All images should be optimized for online display.
  • Don’t autoplay video or audio content.
  • Don’t autoload video content.

Brand

  • Follow the logo use guidelines outlined in the Brand Center.
    • Access to the Brand Center can be requested from a project manager.
  • CFA Breuer font is preferred for headers. If it isn’t available, Arial or Lato can be substituted.

Color Use

Text Colors

  • All text must be in high contrast to its background, with a ratio of 4.5:1 or greater.
  • When in doubt, use a color contrast checker to determine if the color combination meets WCAG 2.0 AA guidelines.
Text black

WCAG safe

Link blue

WCAG safe

Brand Color Palette

To maintain visual harmony, any given design should use a small selection of the available CFA Institute brand colors. Contrasting brand colors may be used as highlights, but a rainbow effect should be avoided.

When a color is marked "WCAG safe", that means it has enough contrast to be used as colored text against a white background, or that white text can be displayed against a background of that color. Other color combinations should be checked for contrast before being used in text.

Primary Colors

Primary blue

WCAG safe

Primary green

WCAG safe

Primary purple

WCAG safe

Cool gray 10

WCAG safe

Secondary Colors

Secondary blue

Not Safe

Secondary red

WCAG safe

Warm gray 10

WCAG safe

Secondary green

Not Safe

Secondary purple

WCAG safe

Cool gray 6

Not Safe

Secondary dark blue

WCAG safe

Warm gray 6

Not Safe

Cool gray 11

WCAG safe

Tertiary Colors

Tertiary orange

Not Safe

Tertiary dark orange

WCAG safe

Tertiary pink

Not Safe