Recently, a client brought in a project with very specific, complex implementations of an accessible color system. This opened my eyes not only to how important this subject is, but also how much there is to learn.Let’s learn how to go color accessible using the design principles you already know.（作者從近期的專案中體會到色彩易用性設計原則很重要也很值得學習）

Why’s accessibility so important?（為什麼易用性原則如此重要）

Accessibility in digital product design is the practice of crafting experiences for all people, including those of us with visual, speech, auditory, physical, or cognitive disabilities. As designers, developers, and general tech people, we have the power to create a web we’re all proud of: an inclusive web made for and consumable by all people.

Also, not creating accessible products is just rude, so don’t be rude.（不易用的產品時粗魯的，所以別那麼做）

Color accessibility enables people with visual impairments or color vision deficiencies to interact with digital experiences in the same way as their non-visually-impaired counterparts. In 2017, The World Health Organization estimated that roughly 217 million people live with some form of moderate to severe vision impairment. That statistic alone is reason enough to design for accessibility.（色彩易用性可能會影響到使用者視覺健康，資料表明有很多的人正在遭受不同程度由色彩易用性設計缺陷造成的視覺損傷）

Apart from accessibility being an ethical best practice, there are also potential legal implications for not complying with regulatory requirements around accessibility. In 2017, plaintiffs filed at least 814 federal lawsuits about allegedly inaccessible websites, including a number of class actions. Various organizations have sought to establish accessibility standards, most notably the United States Access Board (Section 508) and the World Wide Web Consortium (W3C). Here’s an overview of these standards:（於是就產生以下這兩項標準）

Section 508: 508 compliance refers to Section 508 of the Rehabilitation Act of 1973. You can read the in-depth ordinance here, but to summarize, Section 508 requires that your site needs to be accessible if you are a federal agency or create sites on behalf of a federal agency (like contractors).

W3C: The World Wide Web Consortium (W3C) is an international, voluntary community that was established in 1994 and develops open standards for the web. The W3C outlines their guidelines for web accessibility within WCAG 2.1, which is essentially the gold standard for web accessibility best practices.

Ensuring your product is color-accessible（確保你產品的色彩具有易用性）

Accounting for accessibility early on in a product’s life cycle is best — it reduces the time and money you’ll spend to make your products accessible retroactively. Color accessibility requires a little up-front work when selecting your product’s color palette, but ensuring your colors are accessible will pay dividends down the road.（色彩以易用性設計應該從專案一開始就被重視）

Here are some quick tips to ensure you’re creating color-accessible products.（以下是一些建議）

Add enough contrast（要有足夠的對比度）

To meet W3C’s minimum AA rating, your background-to-text contrast ratio should be at least 4.5:1. So, when designing things like buttons, cards, or navigation elements, be sure to check the contrast ratio of your color combinations.（w3c要求的最低對比時aa級別，背景和內容的對比度至少應該時4.5:1）

There are lots of tools to help you test the accessibility of color combinations, but the ones I’ve found most helpful are Colorable and Colorsafe. I like Colorable because it has sliders that allow you to adjust Hue, Saturation, and Brightness in real time to see how it affects the accessibility rating of a particular color combination.

Don’t rely solely on color（別隻依賴顏色）

You can also ensure accessibility by making sure you don’t rely on color to relay crucial system information. So, for things like error states, success states, or system warnings, be sure to incorporate messaging or iconography that clearly calls out what’s going on.（對於一些錯誤、成功、警告等狀態資訊，不要只依賴色彩，要結合提示語和圖示去做出清晰明確的提示）

Also, when displaying things like graphs or charts, giving users the option to add texture or patterns ensures that those who are colorblind can distinguish between them without having to worry about color affecting their perception of the data. Trello does a great job of this with their Colorblind-Friendly Mode.（對於色盲使用者使用色盲友好的色彩設計方案）

Focus state contrast（焦點狀態也要有合適的對比度）

Focus states help people to navigate your site with a keyboard by giving them a visual indicator around elements. They’re helpful for people with visual impairments, people with motor disabilities, and people who just like to navigate with a keyboard.（對於那些喜歡用鍵盤或者不得不用鍵盤去瀏覽頁面的使用者來說，焦點狀態有很清晰的對比度是很必要的）

All browsers have a default focus state color, but if you plan on overriding that within your product, it’s crucial to ensure you’re providing enough color contrast. This ensures those with visual impairments or color deficiencies can navigate with focus states.

Document and socialize color system（制訂和共享一份色彩系統方案）

Lastly, the most important aspect of creating an accessible color system is giving your team the ability to reference it when needed, so everyone is clear about proper usage. This not only reduces confusion and churn, but also ensures that accessibility is always a priority for your team. In my experience, explicitly calling out the accessibility rating of a specific color combination within a UI Kit or Design System is most effective, especially when socializing that across the team with a tool (like InVision Craft or InVision DSM). Here’s an example of how to document background to text color combinations and the accessibility rating of each combination.（一開始統一制訂出來一份團隊共用的色彩系統方案會大有裨益）

Let’s get accessible!

These are just a few tips to make your product more accessible, but keep in mind, these only relate to color accessibility. To understand accessibility guidelines in detail, I recommend familiarizing yourself with WCAG 2.1. While these guidelines can be a bit daunting, there are tons of resources out there to help you along the way, and when in doubt, don’t hesitate to reach out to designers in your area (or via the internet) for help.

作者：InVision