New Icons and accessibility improvements in itslearning.

New Icons

We are continuously working to enhance your user experience. Over the past year, we have focused on improving the accessibility and design of icons across the platform. As part of this effort, we are increasing the contrast of our icons while also making them more consistent, modern, and meaningful. 

What is happening?

We are updating all icons on the platform. Below, you can compare one of the sections we have updated. 

Screenshot of old icons in Settings - Manage course settings.

Screenshot of new icons in Settings - Manage course settings.

Note: we are not changing the layout, titles, workflow or functionality. This change is only to deliver more consistent and accessible icons.

Benefits of the change

Higher contrast icons – Improving accessibility for all users.

A more modern design – Enhancing the overall user experience and visual consistency.

These changes will make itslearning more user-friendly and visually appealing for everyone.

Note we will not change icons that represent external providers, e.g. Microsoft. 

Further information about our icons

Color contrast is determined by the lightness (luminance) of the colors rather than their hue. This means that the inner shape and background can share a similar hue (e.g., red, green, or blue) as long as the contrast ratio meets WCAG standards—a minimum of 3:1 for non-text elements (Success Criterion 1.4.11: Non-text Contrast).

Examples and Compliance

Below are examples of new icons, along with the contrast ratios of their meaningful shapes based on relative luminance. All combinations comply with WCAG requirements.

Examples of new icons and the color contrast of meaningful shapes that is based on the relative luminance (in text above the icons). All combinations conform to the WCAG requirements.

Understanding Color Dimensions

Colors are defined by Lightness, Hue, and Saturation, but for accessibility, Lightness is the most crucial factor in ensuring sufficient contrast and visibility.

Dimensions colors are specified by: Lightness, Hue, and Saturation. In the context of accessibility, Lightness is the most important one.

Some of the icons displayed in this article may be subject to change.