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.
- 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.
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.
- Use plain language and clear calls to action.
- Errors should be prevented when possible. Error messages should be specific and actionable.
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
- Websites should take a mobile-first design approach.
- Websites should be responsive, so that they display well on desktop, tablet, and mobile devices.
- All images should be optimized for online display.
- Don’t autoplay video or audio content.
- Don’t autoload video content.
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.
- 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.
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.
Default background color for html body