创建色彩对比指南以满足WCAG 2.1及以后的要求
Photo by Henrik Dønnestad on Unsplash
At Salesforce, we want to ensure all our experiences meet or exceed current WCAG (Web Content Accessibility Guidelines) standards. These accessibility guidelines, while comprehensive, can be overwhelming to absorb. They’re also open to interpretation. A group of engineers and designers across our accessibility and design systems teams partnered to evaluate the latest WCAG color contrast guidelines and streamline standards for our work. We wanted to fully integrate WCAG and hope our process can inspire your teams to do the same.
在Salesforce，我们希望确保我们的所有体验符合或超过当前的WCAG（网络内容可访问性指南）标准。这些可访问性指南虽然全面，但却让人不知所措，难以消化。它们也是可以被解释的。我们的可及性和设计系统团队的一组工程师和设计师合作，评估最新的WCAG色彩对比指南，并为我们的工作简化标准。我们想完全整合WCAG，并希望我们的过程可以激励你的团队做同样的事情。
We built on the work we did in 2020 to create and launch a new color system. The color system uses numerical values, which gives users a quick way to know what the color contrast ratios are. It complements other tools like WebAim: Contrast Checker or plugins. Using our color model as our foundation, our team started to craft color contrast guidelines for our design system with the goal of incorporating current and expected updates to future-proof our practices
我们在2020年所做的工作基础上，创建并推出了一个新的颜色系统。该颜色系统使用数值，这给用户提供了一个快速了解颜色对比度的方法。它补充了其他工具，如WebAim：对比度检查器或插件。以我们的色彩模型为基础，我们的团队开始为我们的设计系统精心设计色彩对比准则，目的是纳入当前和预期的更新，以保证我们的实践。
Our approach
我们的方法
First, we needed to align on target definitions. What does it mean to meet a WCAG guideline? We assessed each level and created a target definition.
首先，我们需要在目标定义上保持一致。符合WCAG准则的含义是什么？我们评估了每个级别并创建了一个目标定义。
Various Levels of Contrast (Text and Non-Text)
各种程度的对比（文本和非文本）
Next, we evaluated all the patterns in our Lightning Design System for common and repeatable visual usage that had color-conveying meaning. For example, we grouped radio buttons, checkboxes, text inputs, sliders, etc., into “Inputs.” This audit helped us isolate similar use cases within each component category.
接下来，我们评估了Lightning设计系统中的所有模式，以寻找具有色彩传达意义的、常见的、可重复的视觉...