![\"Visual](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2020\/02\/a-screenshot-of-a-social-media-post-description-a.gif\")
<\/p>\n<\/p>\n
The release of Visual Studio 2019 for Mac version 8.4.4 includes numerous developments in the color representation of icons, and to warning and error status messages. The new appearance is easy to spot, and the new color palette is highly noticeable. Let me explain why these changes were necessary, and what exactly was changed.<\/p>\n
Currently, more than 1 billion people experience some form of disability. There are various types of obstacles people must live with \u2013 mobility, cognitive, neural, speech, and hearing. But let\u2019s talk about our visual accessibility enhancements, and what you can experience in the most recent versions of Visual Studio for Mac.<\/p>\n
The World Health Organization calculated that approximately 200 million people currently live with some form of vision impairment. Our goal is for Visual Studio for Mac to be accessible to everyone. We must make sure that we deliver the best user interface experience to every user, whether they are visually impaired or not. There are many visual accessibility issues users may suffer from: low vision, color or total blindness, cataracts. Even such a common thing as sun glare could be a problem when using an application UI. One of the methods to empower visually impaired users to interact with applications more effectively is through color accessibility.<\/p>\n
One of the fundamental ways for us to deliver an accessible UI is to boost the contrast ratio threshold of all interactive content \u2013 primarily text and icons. On a Mac, the background-to-text contrast ratio must be at least 3:1, and at least 4.5:1 in High Contrast mode. We\u2019ll talk more about later in the blog post.<\/p>\n
Another essential requirement here is that we shouldn\u2019t display information differences with just a color shift, such as a status change between an inactive and active icon. Similarly, no information should rely only on color to show its severity. That means elements such as error or warning messages should not use only the background color to communicate their status. We need something more: for example, a highly visible error or warning symbol. In older versions of Visual Studio for Mac, there were numerous instances where we showed a status difference using just a color. Now, we use a more distinctive rendering of activated, disabled and stopped icons, not relying solely only on color. We\u2019ve eliminated those sorts of situations in the interest of greater visual clarity.<\/p>\n
On a Mac, you can toggle the setting for High Contrast Mode by visiting Accessibility Preferences<\/strong> in System Preferences<\/strong> and clicking the Increase Contrast<\/strong> checkbox:<\/p>\n High Contrast Mode<\/strong> increases the color contrast of the whole system\u2019s UI. Controls begin to use strokes and more easily visible shapes and labels. The colors are adjusted to appear more vibrant, and the difference in brightness between the foreground and the background is much more noticeable.<\/p>\n Unfortunately, not all applications on our desktops support High Contrast Mode. Native macOS controls provide High Contrast rendering for free, but it\u2019s up to developers to update their custom controls. Some parts of the Visual Studio for Mac shell are heavily customized, so we still have some way to go.<\/p>\n Of course, using new colors and icons isn’t the only way to improve accessibility. We also wanted to ensure we enhance the experience for users of screen readers and to make sure keyboard shortcuts are available everywhere. We have many more improvements we\u2019ll talk about, and others we\u2019ll introduce soon. For now, we\u2019ll focus on the new color palette and improved icon set, new features that are currently visible to every Visual Studio for Mac user.<\/p>\n Our old Visual Studio for Mac color palette, which was created many years ago, used contrast ratios that were too low, especially in the light IDE theme. Hence, it was finally time for us to update on this front. You can see a comparison between our old and new palettes below, with contrast ratios between the background and foreground.<\/p>\n The old palette had two variants: one for the light and one for the dark IDE theme. As you can see above, the old palette suffered from many problems, especially the color contrast ratio of light-theme warning icons, which was less than ideal. Yellow on white or light gray is extremely difficult for anyone to see.<\/p>\n The new palette fixes all these issues and is also simpler, with better semantic meaning of the color groups. Plus, it\u2019s ready for High Contrast Mode.<\/p>\n We always had tons of icons in Visual Studio for Mac. By the time we released the changes detailed in this post, there were 1142 icons. Most of the icons came in four flavors: two for light and dark theme, and two for selected states (usually white-only glyph, displayed on the top of the system-wide accent color). We had all these a second time because we needed icons available for standard and high DPI (@2x) resolutions.<\/p>\n Now, we have twice as many icons, and it was a gigantic job. Every one had to be checked for accessibility issues as described above, converted to the new palette, duplicated, and repainted using the new High Contrast palette. That means we\u2019re not just introducing new High Contrast icons; we\u2019re also improving all our already existing ones. At this very moment Visual Studio for Mac uses 13704 icon files.<\/p>\n Some icons needed to be redrawn or adjusted, as they relied solely on color to show differences, such as the difference between normal and active states:\n We also took this opportunity to change colors of warning- and error-related messages Visual Studio for Mac shows. You\u2019ll notice this most with light theme warning text, which was previously brighter than ideal and potentially challenging to read.<\/p>\n We now have new colors for error popovers, with a better appearance in general and when in High Contrast Mode:<\/p>\n The changes described above aim to make the UI of Visual Studio for Mac easier for all developers to use. Now we have not only highly readable icons for visually-impaired users, but our already established standard icon set sports new, more prominent contrast in colors as well \u2013 helping the users with no accessibility demands at all. In any case, we still have much work ahead of us, but we\u2019re getting better every day.<\/p>\n If you have feedback on these changes, please let us know by reaching out to us in the comments below. You can also reach out to us on Twitter at @VisualStudioMac<\/a>. If you run into any issues using Visual Studio for Mac, you can use Report a Problem<\/a> to notify us. We also welcome your feature suggestions on the Visual Studio Developer Community<\/a> website.<\/p>\n","protected":false},"excerpt":{"rendered":" The release of Visual Studio 2019 for Mac version 8.4.4, includes numerous developments in the color representation of icons, and to warning and error status messages.<\/p>\n","protected":false},"author":17963,"featured_media":228246,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[229,3743,452],"class_list":["post-228244","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-accessibility","tag-visual-studio-2019-for-mac","tag-visual-studio-for-mac"],"acf":[],"blog_post_summary":" The release of Visual Studio 2019 for Mac version 8.4.4, includes numerous developments in the color representation of icons, and to warning and error status messages.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/228244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/17963"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=228244"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/228244\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/228246"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=228244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=228244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=228244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"macOS](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2020\/02\/a-screenshot-of-a-cell-phone-description-automati.png\")
<\/p>\nNew Color Palette<\/h2>\n
![\"Visual](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2020\/02\/vsmac-a11y-3b@2x.png\")
<\/p>\nImproved Icons<\/h2>\n
![\"Examples](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2020\/02\/a-screenshot-of-a-cell-phone-description-automati-1.png\")
<\/p>\nNew Warning and Error Colors<\/h2>\n
![\"Three](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2020\/02\/a-screenshot-of-a-cell-phone-description-automati.gif\")
<\/p>\n![\"High](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2020\/02\/a-screenshot-of-a-cell-phone-description-automati-2.png\")
<\/p>\nHelpful to Everybody<\/h2>\n