Graphics Considerations
When creating images and graphics or sourcing existing images, it’s essential to consider the proper image resolution, colour space, and formats. We can ensure our OER images and graphics are visually appealing and optimized for their intended use.
- 72 to 150 DPI – Modern displays use higher pixel density more often, so greater than 72 dpi is permissible.
- RGB Colour Space
- Minimum 1200 pixels wide
- Photos: JPEG – Exported as medium to high quality, depending on the photo and the resulting file size.
- Illustrations or other graphics: PNG – Transparent background depending on the graphic.
- Cover Photos: Images should be in Portrait orientation. High-quality, large images are ideal.
- Accessibility in Colour and Design
- Images should be centred or aligned left – be consistent with image size throughout. Often, you don’t need to keep the original file size – choose a pixel size – say 600 – that fills the page but not entirely.
- Very large images, especially decorative ones, will result in large page space in the export of the book.
- Figures, images, names, etc, should be placed in the Caption section of the image editor.
- Images should generally be linked to the media sources in the image editor. This will allow the image to be easily downloaded and/or viewed closer by the user in a new window, if needed, especially for larger diagrams or explanatory images.
- Alt text should be added if the image is not explained in the body of the text using the alt text space in the image editor; otherwise, leave it blank if decorative.
- Image sources and Copyright info should be linked in the caption field, for example:
- Figure 2.2.1: A schematic of the triple constraint triangle. “The Triad Constraints” by John M. Kennedy, CC BY-SA 3.0.
- Any modifications should be listed after the license.
Accessibility
Ensuring that our graphics and images are accessible to everyone is essential. It can be difficult to find ready-made, accessible graphics and images in Open Educational Resources. To overcome this, we often create our graphics using design principles that make them easy to use for everyone. We focus on colour contrast, font size, and readability guidelines. However, it’s important to remember that these tools focus on technical aspects of accessibility and may not consider everything. They can tell us things like if our colours have enough contrast or if we’ve provided alternative text, but they might miss other important factors. To overcome this, we use these tools as a starting point to check for accessibility issues. But we also review our graphics and images ourselves, ask people to test them and get feedback from different people. This way, we ensure our graphics and images are accessible to as many people as possible in our Open Educational Resources.
Web Tools
- Web Content Accessibility Guidelines (WCAG): The WCAG provides guidelines to make digital content, including graphics, accessible to people with disabilities. Familiarize yourself with the WCAG’s colour contrast, font size, and readability recommendations.
- Wave Web Accessibility Evaluation Tool: Analyzes web content for accessibility issues, including images.
- Accessible Colours: Use tools like WebAIM’s Colour Contrast Checker or Contrast Checker to check the colour contrast ratio between foreground and background colours.
- Colour Contrast Analyzer: A desktop tool for checking colour contrast ratios.
- Colour Blindness Simulation: Check how your designs appear to people with colour blindness using tools like Coblis or Colour Oracle
- A11y Colour Palette: Helps create accessible colour palettes by providing colour contrast ratios.
