CFA Institute Pattern Library

Welcome to CFA Institute's pattern library. The Service Manual is our home for guidelines and best practices. The Design System is a comprehensive catalog of UI components, styles, scripts, HTML, and other documentation regarding the web site.

CFA Institute Sketch Library

Getting Started

To deliver a quality online experience, CFA Institute follows a number of principles. This high-level overview is intended primarily for vendors but can be followed by anybody.

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 color styles.
  • Text should never be displayed over an image.

Accessibility

CFA Institute follows WCAG 2.1 AA accessibility guidelines. We strongly recommend testing site accessibility using WebAIM's WAVE tool or Deque’s axe. Both tools offer a browser extension for evaluating unpublished sites.

How to Meet WCAG
  • 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, except for logos and purely decorative images.
  • Video and audio content should offer a text transcript.
  • 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.

Usability

  • Use plain language and clear calls to action.
  • Errors should be prevented when possible. Error messages should be specific and actionable. Users should understand what went wrong and how to resolve the error.

Compatibility

We test and support the following browsers:

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

Mobile First

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

Performance

Performance can be evaluated using PageSpeed Insights.

  • All images should be optimized for online display.
  • Don’t autoplay video or audio content.
  • Don’t autoload video content.
  • Avoid render-blocking resources.

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.1 AA guidelines.

Brand Color Palette

To maintain visual harmony, a 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.

Colors

Additional Guidelines

Contact

For questions or help related to the Pattern Library, or to make suggestions — please contact a member of the UX team: