With the November 2022 release of ArcGIS Online, a new ArcGIS Arcade editor was introduced to the platform. This editor provides a variety of improvements to help users author their expressions quickly and efficiently. Since then, Esri has been exploring ways to enhance the experience of users leveraging Arcade in their work. With the June 2023 release of ArcGIS Online, a new accessible color palette for syntax highlighting has been added to the editor in Map Viewer.
Color in Code
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.
Color Vision Deficiencies
A color vision deficiency–colloquially referred to as color blindness–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. Table 1 contains a brief overview of the various types of color vision deficiencies.
Accessibility in ArcGIS Online
Accessibility is the practice of developing and producing content that is usable for all individuals, regardless of their physical or cognitive capabilities. Esri is committed to ensuring its products are accessible, and ArcGIS Online is no exception.
To achieve this objective, Esri leverages the Web Content Accessibility Guidelines (WCAG 2.0), an internationally recognized set of standards used for developing accessible web content and software. 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. This criterion specifies that the contrast ratio between foreground and background elements must be at least 4.5:1. This ensures that text is still legible for individuals with moderately low vision or other color vision deficiencies.
A Brief History of Color in Arcade
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.
Within the new editor, these colors were expanded to include other syntax elements such as keywords and comments. While this was a huge enhancement from the previous version, 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:
- Better differentiate syntax elements within an Arcade expression
- Ensure the element contrast is compliant with WCAG 2.0 1.4.3 standards, both for individuals with typical color vision and with those with color vision deficiencies.
Out with the Old, In with the New (Colors)
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 have changed, Esri tried to maintain consistency where possible. For example, text is still red, and numbers are still green.
The new colors and the respective elements they’re assigned to in the editor are listed in Table 2. Right now, you’ll be able to see these new colors in use anywhere in Map Viewer that leverages the Arcade editor (e.g., styles, labels, pop-ups, and forms).
Ensuring that color isn’t the only way information is conveyed is an important tenet of accessible web design. The color palette we’ve implemented for highlighting syntax in the editor has been tested to ensure it meets WCAG 2.0 contrast standards for all types of color vision deficiencies.
While syntax color certainly isn’t the only method for conveying context in the editor, Esri wants to ensure that the contrast of text is sufficient for all individuals working with Arcade expressions in ArcGIS Online.
Conclusion
If you haven’t already had the chance, try out our new syntax colors. Aside from Map Viewer, they’re also available in the ArcGIS Arcade playground.
Esri is also hoping to leverage these syntax colors in other areas where Arcade is used in ArcGIS. Finally, a WCAG 2.0 compliant color palette for a dark version of the editor is being developed. For more information on enhancements to the Arcade editor, read these blog posts, “Introducing the new Arcade Editor in ArcGIS Online” and “Discover the powerful new features of the Arcade Editor”.
About the author
