设计无障碍色彩系统

Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens. With this in mind, we recently updated the colors in our user interfaces to be more accessible. Text and icon colors now reliably have legible contrast throughout the Stripe Dashboard and all other products built with our internal interface library.

色彩对比是无障碍性的一个重要方面。良好的对比度使有视觉障碍的人更容易使用产品,并有助于在不完善的条件下,如低光环境或旧屏幕。考虑到这一点,我们最近更新了我们的用户界面的颜色,使之更便于使用。文字和图标的颜色现在在整个Stripe Dashboard和所有其他用我们的内部界面库构建的产品中都有可靠的可读对比。

Achieving the right contrast with color is challenging, especially because color is incredibly subjective and has a big effect on the aesthetics of a product. We wanted to create a color system with hand-picked, vibrant colors that also met standards for accessibility and contrast.

实现正确的色彩对比是具有挑战性的,特别是因为色彩是非常主观的,对产品的美感有很大影响。我们希望创建一个具有手工挑选的、充满活力的色彩系统,同时满足可及性和对比度的标准。

When we evaluated external tools to improve color contrast and legibility in our products, we noticed two common approaches to tackling the problem:

当我们评估外部工具以改善我们产品的色彩对比度和可读性时,我们注意到有两种常见的处理问题的方法。

  1. Hand-pick colors and check their contrast against a standard. Our experience told us that this approach made choosing colors too dependent on trial and error.
  2. 手工挑选颜色,并对照标准检查其对比度。我们的经验告诉我们,这种方法使选择颜色过于依赖试验和错误。
  3. Generate lighter and darker tints from a set of base colors. Unfortunately, simply darkening or lightening can result in dull or muted colors, which can be difficult to distinguish from each other and often just don’t look good.
  4. 从一组基色中产生较浅和较深的色调。不幸的是,简单的变暗或变亮可能会导致颜色暗淡或无光泽,这些颜色可能很难相互区分,而且往往只是看起来不好看。

With the existing tools we found, it was hard to create a color system that allowed us to pick great colors while ensuring accessibility. We decided to create a new tool that uses perceptual color models to give real-time feedback about accessibility. This enabled us to quickly create a color scheme that met our needs, and gave us something we co...

开通本站会员,查看完整译文。

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.124.0. UTC+08:00, 2024-04-26 10:53
浙ICP备14020137号-1 $访客地图$