{"id":1949032,"date":"2023-06-15T06:05:36","date_gmt":"2023-06-15T13:05:36","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1949032"},"modified":"2024-10-31T23:57:23","modified_gmt":"2024-11-01T06:57:23","slug":"accessibility-and-arcade-working-in-color","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/accessibility-and-arcade-working-in-color","title":{"rendered":"Accessibility and Arcade: Working in Color"},"author":319692,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,22941],"tags":[28911,32551,521102,769982],"industry":[],"product":[36551],"class_list":["post-1949032","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-mapping","tag-accessibility","tag-arcade","tag-mapviewer","tag-whats-new-june-2023","product-arcgis-online"],"acf":{"authors":[{"ID":319692,"user_firstname":"Taylor","user_lastname":"McNeil","nickname":"Taylor McNeil","user_nicename":"tmcneil","display_name":"Taylor McNeil","user_email":"tmcneil@esri.com","user_url":"","user_registered":"2022-10-06 12:43:53","user_description":"Taylor is a Product Engineer on the ArcGIS Online team based in Nova Scotia, Canada. She has received a BSc in Biology and a MSc in Applied Geomatics. When she's not at work, she can be found taking care of her houseplants, reading copious amounts of fiction, and exploring local thrift stores.","user_avatar":""}],"short_description":"Take a deep dive into the new accessible color palette for syntax highlighting available in the Arcade editor.","flexible_content":[{"acf_fc_layout":"content","content":"

In the November 2022 release of ArcGIS Online, a new Arcade editor was introduced to the platform. This editor provided a variety of improvements to help users author their expressions quickly and efficiently. For an overview of all these changes, check out our previous blogs here<\/a> and here<\/a>.<\/p>\n

Since then, we’ve been busy exploring ways we can continue to enhance the experience of users leveraging Arcade in their work.<\/p>\n

We’re excited to announce that with the June 2023 release of ArcGIS Online, a new accessible color palette for syntax highlighting will be coming to the editor in MapViewer!<\/p>\n

Color in code<\/h2>\n

Using color to provide context is a common practice in design, and syntax highlighting is no exception. Syntax highlighting, otherwise known as code colorization, is a method used to help quickly differentiate elements within a script. It can help authors troubleshoot issues in their script while simultaneously improving code readability.<\/p>\n"},{"acf_fc_layout":"content","content":"

Color vision deficiencies<\/h2>\n

A color vision deficiency – colloquially referred to as colorblindness – is an inability for an individual to distinguish certain shades or colors. The type and severity of color vision deficiency can vary greatly between individuals. For a brief overview of the various types of color vision deficiencies, you can refer to the table below.<\/p>\n"},{"acf_fc_layout":"content","content":"\n\n\n\n\n\n\n\n\n\n
Color vision deficiency<\/strong><\/td>\nDescription<\/strong><\/td>\nExample<\/strong><\/td>\n<\/tr>\n
None<\/td>\nN\/A<\/td>\n<\/td>\n<\/tr>\n
Deuteranomaly<\/td>\nDifficulty seeing green<\/td>\n<\/td>\n<\/tr>\n
Deuteranopia<\/td>\nUnable to perceive green<\/td>\n<\/td>\n<\/tr>\n
Protanomaly<\/td>\nDifficulty seeing red<\/td>\n<\/td>\n<\/tr>\n
Protanopia<\/td>\nUnable to perceive red<\/td>\n<\/td>\n<\/tr>\n
Tritanomaly<\/td>\nDifficulty seeing blue and yellow<\/td>\n<\/td>\n<\/tr>\n
Tritanopia<\/td>\nUnable to perceive blue and yellow<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n"},{"acf_fc_layout":"content","content":"

Accessibility in ArcGIS Online<\/h2>\n

Accessibility is the practice of developing and producing content that is useable for all individuals, regardless of their physical or cognitive capabilities. Esri is committed to ensuring our products are accessible, and ArcGIS Online is no exception.<\/p>\n

To achieve this objective, we leverage the Web Content Accessibility Guidelines<\/a> (WCAG 2.0), an internationally recognized set of standards used for developing accessible web content and software.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"

If you’re interested in learning about other enhancements we’ve implemented to support accessibility in ArcGIS Online, check out some of these other blogs here<\/a>.<\/em><\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

The new color palette used to highlight syntax in the Arcade editor was designed to be compliant with WCAG 2.0 special criterion 1.4.3<\/a>.<\/p>\n

Special criterion 1.4.3 specifies that the contrast between foreground and background elements must be at least 4.5:1<\/strong>. This ensures that text is still legible for individuals with moderately low vision or other color vision deficiencies.<\/p>\n"},{"acf_fc_layout":"content","content":"

A brief history of color and Arcade<\/h2>\n

If you’ve used the Arcade editor before, you’ll know that syntax highlighting isn’t new. All versions of the editor have leveraged color to varying degrees to differentiate syntax elements. In the initial release of the editor, minimal highlighting was used to signify text and numbers.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1949862,"id":1949862,"title":"oldEditorsyntaxHighlight","filename":"oldEditorsyntaxHighlight.jpg","filesize":25187,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/accessibility-and-arcade-working-in-color\/oldeditorsyntaxhighlight","alt":"Syntax highlighting present in the original Arcade editor.","author":"319692","description":"","caption":"Syntax highlighting present in the original Arcade editor is only applied to text and numbers.","name":"oldeditorsyntaxhighlight","status":"inherit","uploaded_to":1949032,"date":"2023-06-02 19:00:39","modified":"2023-06-02 19:07:27","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":702,"height":208,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight.jpg","medium-width":464,"medium-height":137,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight.jpg","medium_large-width":702,"medium_large-height":208,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight.jpg","large-width":702,"large-height":208,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight.jpg","1536x1536-width":702,"1536x1536-height":208,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight.jpg","2048x2048-width":702,"2048x2048-height":208,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight.jpg","card_image-width":702,"card_image-height":208,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/oldEditorsyntaxHighlight.jpg","wide_image-width":702,"wide_image-height":208}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Within the new editor, these colors were expanded to include other syntax elements like keywords and comments.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1949882,"id":1949882,"title":"newEditorsyntaxHighlight","filename":"newEditorsyntaxHighlight.jpg","filesize":20846,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/accessibility-and-arcade-working-in-color\/neweditorsyntaxhighlight","alt":"Syntax highlighting in the new Arcade editor released in November 2022.","author":"319692","description":"","caption":"Syntax highlighting in the new Arcade editor is expanded to include comments and keywords in the script.","name":"neweditorsyntaxhighlight","status":"inherit","uploaded_to":1949032,"date":"2023-06-02 19:01:51","modified":"2023-06-02 19:07:36","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":587,"height":219,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight.jpg","medium-width":464,"medium-height":173,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight.jpg","medium_large-width":587,"medium_large-height":219,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight.jpg","large-width":587,"large-height":219,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight.jpg","1536x1536-width":587,"1536x1536-height":219,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight.jpg","2048x2048-width":587,"2048x2048-height":219,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight.jpg","card_image-width":587,"card_image-height":219,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/newEditorsyntaxHighlight.jpg","wide_image-width":587,"wide_image-height":219}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

While this was a huge enhancement from before, there was some overlap in the colors used for different elements, and therefore, room for improvement. The editor’s new color palette has been designed to fulfill two objectives:<\/p>\n

    \n
  1. Better differentiate syntax elements within<\/em> the arcade expression<\/li>\n
  2. Ensure contrast is compliant with WCAG 2.0 1.4.3 standards, both for individuals with typical color vision and<\/strong> with other color vision deficiencies<\/li>\n<\/ol>\n

     <\/p>\n"},{"acf_fc_layout":"content","content":"

    Out with the old, in with the new (colors)!<\/h2>\n

    If you’ve already seen the new syntax colors, you might have noticed there are some similarities between the old and new color palettes. While the hue and saturation of many of the element colors has changed, we’ve tried to maintain consistency where possible. For example, text is still red, and numbers are still green.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1950312,"id":1950312,"title":"editor_typicalVision","filename":"editor_typicalVision.jpg","filesize":108899,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/accessibility-and-arcade-working-in-color\/editor_typicalvision","alt":"New syntax highlighting in the Arcade editor as of June 2023.","author":"319692","description":"","caption":"New syntax highlighting color palette for the Arcade editor in MapViewer as of June 2023. ","name":"editor_typicalvision","status":"inherit","uploaded_to":1949032,"date":"2023-06-02 20:12:45","modified":"2023-06-02 20:13:01","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":835,"height":442,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision.jpg","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision.jpg","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision.jpg","large-width":835,"large-height":442,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision.jpg","1536x1536-width":835,"1536x1536-height":442,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision.jpg","2048x2048-width":835,"2048x2048-height":442,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision-826x437.jpg","card_image-width":826,"card_image-height":437,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/editor_typicalVision.jpg","wide_image-width":835,"wide_image-height":442}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    The new colors and the respective elements they’re assigned to in the editor are listed below:<\/p>\n