Icons & Images

Please note that this page of the Style Guide does not discuss how to properly give attribution to artists. For more information on that topic, visit the Image Attribution page instead. 

1. are from approved sources
2. meet WCAG 2.0 AA accessibility requirements for Graphical Objects and User Interface Components
3. exemplify Michigan Virtual’s commitment to diverse and equitable representation
4. align with Michigan Virtual’s branding standards and/or the visual design of the course in question

Choose images and icons from approved sources.

Developers will use the following sources for stock photos:

1. Create original imagery (take photos, make digital artwork, or design custom icons in programs like Adobe Illustrator or Canva)
   1. Note that Michigan Virtual will hold the rights to any imagery you create from scratch.
2. Free or paid MV subscription images:
   1. Pixabay
   2. Pexels
   3. Unsplash
   4. FreePik
   5. Getty Images
   6. All4Ed
   7. Canva
   8. Articulate
3. Free Vector Icons
   1. Font Awesome Free Icons
      1. Note: This entry about Changing Font Awesome Icon Color explains everything you need to know about how to change the color of icons you find on Font Awesome. There’s also a video tutorial that presents all the same information. 
4. AI-Generated Images
5. Client-owned images to which that client holds the rights for use in the course in question. 
   1. Note: CDM will need to obtain a document signed by the client about copyright information.

Meet WCAG AA requirements for Graphical Objects and User Interface Components

To meet WCAG 2.0 AA requirements for Graphical Objects and User Interface Components, developers must ensure that at least one of the following is true of all graphical objects and meaningful visual cues:

1. All meaningful visual cues achieve a color contrast ratio of 3:1 or greater against the background color. If a person needs to perceive a graphic or part of a graphic (a graphical object) in order to understand the content, it must have sufficient contrast. “Meaningful visual cues” includes:
   1. General graphical objects
      1. stand-alone icons (e.g., a print button with no text)
      2. the important parts of more complex diagrams, such as each line in a graph
   2. Infographics
      1. Any graphic conveying data, such as a chart or diagram. 
2. A long description or image transcript containing all the same information in the form of text with sufficient contrast is included alongside the infographic so that the learner is not forced to rely upon the graphic alone for understanding.

Essential Exceptions

Graphical objects do not have to meet the contrast requirements when they are:

1. Logotypes and flags: The brand logo of an organization or product is the representation of that organization and is therefore exempt. Flags may not be identifiable if the colors are changed to have sufficient contrast.
2. Sensory: There is no requirement to change pictures of real-life scenes, such as photos of people or scenery.
3. Representing other things: If you cannot represent the graphic in any other way, it is essential. Examples include:
   1. Screenshots to demonstrate how a website appeared.
   2. Diagrams of medical information that use the colors found in biology (example medical schematic from Wikipedia). 
   3. Color gradients that represent a measurement, such as heat maps (example heatmap from Wikipedia).

Note: For much more detail on this section, see Understanding SC 1.4.11: Non-text Contrast (Level AA)

Uphold Michigan Virtual’s commitment to diverse and equitable representation

When selecting stock images or iconography, be mindful of the perceived race, gender, age, physical abilities, and socioeconomic status of the photograph or animation’s subjects. 

Align imagery with the appropriate branding standards

Branded Color Scheme: All imagery and icons in a course should match that course’s visual styling in whatever ways possible. 

• Images are not required to contain brand colors. However, if you wish, and if allowed by the image’s license, you may alter the color scheme of images to match more closely with Michigan Virtual (or a client’s) brand colors using software like Adobe Photoshop or Canva. 
• Icons and custom graphics you create from scratch for use in any context in a course must match the brand styling of the rest of the course. Use brand fonts and colors while still meeting minimum accessibility standards. 

Avoid Graduation Caps: Because Michigan Virtual is not a diploma-granting organization, refrain from using imagery that includes graduation caps so users are not potentially misled as to our credit-granting status. This is especially important when choosing images for the course catalog. 

• Note: It’s ok to use images of graduation caps or ceremonies if the context of your course requires it (e.g., in vocabulary flashcards in a language lesson about important life events like graduation).

• W3C Pages Related to This Topic:
  • 1.4.11 Non-text Contrast
  • 1.1.1 Non-text Content
  • 1.4.1 Use of Color
  • 1.4.3 (Text) Contrast
  • 1.4.5 Images of Text
• Style Guide: Alt Text
• Style Guide: Changing Font Awesome Icon Color
• Style Guide: Artificial Intelligence
• Style Guide: Image Attribution
• Style Guide: Attribution Document
• Style Guide: Color Contrast
• Style Guide: Animation
• Style Guide: Images of Text
• Style Guide: Design Standards