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

$p_blue

#017acd
WCAG-safe

$p_green

#138761
WCAG-safe

$p_purple

#5972c8
WCAG-safe

$p_coolgray10

#666666
WCAG-safe

Secondary

$s_bgblue

#002f6c
WCAG-safe

$s_blue

#00b5e2
Not Safe

$s_red

#af272f
WCAG-safe

$s_warmgray10

#796e65
WCAG-safe

$s_green

#78be20
Not Safe

$s_purple

#5949a7
WCAG-safe

$s_coolgray6

#a7a8aa
Not Safe

$s_darkblue

#003da5
WCAG-safe

$s_warmgray6

#a59c94
Not Safe

$s_coolgray11

#53565a
WCAG-safe

Tertiary

$t_orange

#ffa300
Not Safe

$t_darkorange

#ae650c
WCAG-safe

$t_pink

#ef4a81
Not Safe

Text

$text

#231f20
WCAG-safe

$link

#0773be
WCAG-safe

$s_lightgray

#f5f5f5
Default background color for html body