Ensuring Canvas Content is Accessible in Dark Mode

Environment

Canvas (with dark mode enabled)

Issue

How do I ensure my Canvas course content is accessible to students using dark mode?

Resolution

While there is no dark mode for canvas on desktop currently,  some users on mobile devices may use Canvas in dark mode . While working to create accessible course content, you may want to consider compatibility with Canvas dark mode.

Currently, there is no automated tool to detect accessibility issues specifically for dark mode in Canvas, but you can manually review your content accessibility in dark mode by open your course content on a mobile device with dark mode enabled and making sure that your content is still visible and readable.

There are some common issues and best practices you may want to consider:

1. Dark color fonts low contrast: Dark font colors set on a white background do not automatically adjust in dark mode, resulting in low contrast on a black background.
   1. Apply both text and background colors to ensure sufficient contrast.
   2. Use highlighting to create a background color behind text.
2. Black text not inverting to white: If black text color is applied manually in the editor or code, it remains black in dark mode instead of inverting to white. To fix this:
   1. Select the affected text in the text editor.
   2. Go to the menu and choose Format > Remove Formatting

For more detailed guidance on designing for dark mode accessibility, see Mastering Dark Mode Design.

Additional Information

Need additional information or assistance? Contact the ITS Service Center.