Get best of the week

Accessibility Enhancements in Visual Studio 2019 for Mac

image

The release of Visual Studio 2019 for Mac version 8.4.4 includes numerous changes to the color palette of icons, warnings, and error messages. The new look is striking, and the new color scheme is even more noticeable. In this article I will explain why these changes are really important and what exactly has been changed.

Currently, more than 1 billion people have some form of disability. People have to deal with various problems almost daily. These include mobility limitations, cognitive and nervous disturbances, problems with speech and hearing. In this regard, we want to talk about visual accessibility improvements in the latest versions of Visual Studio for Mac.

According to the World Health Organization, about 200 million people currently live with some form of visual impairment. Our goal is to make Visual Studio for Mac accessible to everyone. To do this, we must provide the best user interface for each user, regardless of whether he has vision problems or not. There are many users with low vision, color or complete blindness, cataracts. The updated interface will help them to work more fully in the program. After all, even such a common thing as sun flare can be a problem when using the user interface of the program. One of the methods that allows users with visual impairments to more effectively interact with applications is the availability of a color palette.

One of the main ways to create an accessible user interface is to increase the contrast threshold for all interactive content - primarily text and icons. On Mac, the ratio of contrast between background and text should be at least 3: 1, and in high contrast mode at least 4.5: 1. Later we will return to this topic.

Of course, one cannot rely solely on color differences to show the seriousness of the information. For example, on state changes between active and inactive icons. This means that elements such as error messages or warnings should not use only the background color to convey their status. We need something more: for example, a clearly visible sign of an error or warning. In older versions of Visual Studio for Mac, often the difference in state was only displayed in color. Now we are using a clearer rendering of activated, disabled, and stopped icons, not relying solely on color. We ruled out such situations in the interest of greater visual clarity.

High contrast mode


On a Mac, you can activate the high contrast mode by visiting the section Accessibility Preferences in System Preferences and selecting the check box on the Increase Contrast :

image

High Contrast mode increases the color contrast of the entire interface. Controls begin to use strokes and easily visible shapes and labels. The colors are adjusted to look brighter, and the difference in brightness between the foreground and the background is much more noticeable.

Unfortunately, not all applications on our desktop PCs support high contrast mode.

Of course, using new colors and icons is not the only way to improve visual accessibility. We also wanted to ensure the convenience of working with screen readers and provide the ability to use hot keys. We still have many plans, some of which we will talk about today, and the rest we will present a little later. In this article, we will focus on the new color palette and improved icon set, as well as new features that are currently available to every user of Visual Studio for Mac.

New color palette


Our old color palette for Visual Studio for Mac, created many years ago, used too low contrast ratios, especially in the light theme of the IDE. Therefore, it is time to fix it. Compare our old and new palettes and contrast ratios of icons and background.

image

The old palette had two options: one for the light and the other for the dark IDE theme. As you can see above, the old palette suffered from many problems, especially from the contrast of the color of the warning icons on a light topic, which was not ideal. Yellow on white or light gray is very difficult to see.

The new palette fixes all these problems and is also simpler, with better semantic meaning of color groups. Plus, it is ready to work in high contrast mode.

Improved Badges


We always had a lot of icons in Visual Studio for Mac. By the time we released the changes detailed in this article, it had 1,142 badges. Most of the icons were presented in four versions: one for a light and dark theme, and two for selected states.

Now we have much more badges, and a huge work has been done for this. Each of them had to be checked for availability problems, as described above, converted, duplicated and repainted using a new high-contrast palette. This means that we not only introduce new icons with high contrast, but also improve existing ones. Visual Studio for Mac currently uses 13,704 icon files.

Some of the icons needed to be redrawn or adjusted, since earlier the emphasis was only on color to show the differences between normal and active states:

image

New colors for warnings and errors


We also took this opportunity to change the colors of the warnings and error messages that Visual Studio for Mac shows. This is best seen in the warning text in a light topic that used to be too bright and potentially difficult to read.

image

Now we have new colors for error warning pop-ups, improved appearance in standard mode and in high contrast mode:

image

Finally


The changes described above are designed to make the Visual Studio for Mac interface easier for all developers. Now we have not only well-readable icons for users who have vision problems, but also our already installed standard icon set, which demonstrates a new, more noticeable contrast in colors, which helps users not to resort to accessibility features at all. In any case, we still have a lot of work, but every day Visual Studio is getting better.

If you want to share your opinion on these changes, then please write them in the comments to the original article , or on Twitter, addressing @VisualStudioMac. If you encounter any problems when using Visual Studio for Mac, then use the Report a Problem function to notify us. We also welcome your feature suggestions on the Visual Studio Developer Community site .

More articles:


All Articles