Accessibility FAQ

Welcome to the accessibility FAQ page. Here you will find information on accessibility features and best practices when submitting content on Elevate. If you have any feedback, please email elevate@ucalgary.ca.

What is Dark Mode?

Dark mode, also known as dark theme or night mode, is a display setting for user interfaces where, instead of the default dark text on a light background, light-colored text, icons, and graphical elements are shown on a dark background.

Many users prefer dark mode for a variety of reasons:

• Reduced Eye Strain: In low-light environments, a darker interface can be less glaring and more comfortable to view.
• Improved Battery Life: On devices with OLED or AMOLED screens, dark mode can save a significant amount of power because black pixels are simply turned off.
• Aesthetics: Some users simply prefer dark mode.

How to Enable Dark Mode

Here are links to instructions for enabling dark mode on various platforms:

• Firefox: Change website appearance settings in Firefox
• Chrome: Turn on Dark theme or Dark mode in Chrome
• Edge: Use the dark theme in Microsoft Edge
• iPhone/iPad: Use Dark Mode on your iPhone and iPad
• Windows: Personalize Your Colors in Windows
• MacOS: Use a light or dark appearance on your Mac

Contrast and Colour

When designing for dark mode, it's crucial to maintain sufficient contrast to ensure text is readable and accessible. The Web Content Accessibility Guidelines (WCAG) set the standard, requiring a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

For interactive elements like links, buttons, and other highlights, use the official University of Calgary colours. Always verify uncommon colour combinations before implementing them. Use tools like the WebAIM Contrast Checker and Link Contrast Checker to ensure your design is both beautiful and accessible.

Combinations to avoid:

UCalgary red on teal, gold on light yellow, light yellow on taupe, berry on brown, red on berry, dark orange on red, red on rubine.