As instructors, you take considerable time building your course to engaging and informative content for your students. But have you ever stopped to consider how your students are actually viewing that content? IT-ATS estimates about 85% of UD students use the Canvas Student mobile apps, and a growing number of students are opting for dark mode on their devices. Dark mode, a display setting that uses a dark background with light text, has become increasingly popular to reduce eye strain and improve battery life. Canvas estimates 60-70% of mobile app users use dark mode on their phones. You may want to preview this setting when developing your course materials to ensure your students interact with your content as expected.
What can go wrong with course content? Content that looks great when you create it in a browser in light mode can be difficult to read in dark mode. For example, a brightly colored infographic against a dark background can be distracting if portions of the graphic become invisible or if nontransparent backgrounds are revealed. Similarly, light text on a light background can become a real problem if the text color does not have enough contrast.
So what can you do to ensure your content is accessible in both light and dark modes?
- Ensure sufficient contrast between your text and background colors. Avoid light text on a light background and dark text on a dark background. Use online contrast checkers, such as the WebAim Color Contrast Checker, and pay attention to Canvas accessibility checker notifications in the rich content editor.
- Be mindful of images with light backgrounds since they can appear stark in dark mode. Consider using images with transparent backgrounds, and if your image contains text on the background, try a fixed background color.
- The best way to ensure your content looks good in both modes is to test it! Use the mobile apps to view your course with both light and dark mode enabled to identify any potential issues and make necessary adjustments. Canvas mobile apps display a Switch To Light Mode feature on many content items for a quick viewing comparison in each mode.
For more information about dark mode in Canvas mobile apps, please see the following Canvas resources: Dark Mode on Mobile, Mastering Dark Mode Design, How do I set my theme in the Student App on my iOS device?, and How do I set my theme in the Student App on my Android device?
