a标签未访问颜色_网站可访问性颜色对比

a标签未访问颜色

This is the first in a series of articles on web accessibility that aims to provide designers, developers and product owners with an understanding of the common challenges, who they affect and what solutions are available.

这是有关网络可访问性的系列文章中的第一篇，旨在使设计师，开发人员和产品所有者了解常见的挑战，它们所影响的人以及可用的解决方案。

介绍 (Introduction)

Colour contrast is the difference in “luminance” or brightness of two colours. In a typical web application we’re mostly concerned with the difference between core content and its background. Typically core content comprises of text, icons, links, form elements buttons and other custom controls. Colour contrast is measured as a ratio between two colours, so if the contrast is too low many users will not be able to differentiate between the foreground content and the background.

色彩对比度是两种颜色的“亮度”或亮度的差异。 在典型的Web应用程序中，我们主要关注核心内容及其背景之间的差异。 通常，核心内容包括文本，图标，链接，表单元素按钮和其他自定义控件。 颜色对比度是通过两种颜色之间的比率来衡量的，因此，如果对比度太低，许多用户将无法区分前景内容和背景。

Contrast ratio examples

对比度示例

If the contrast is sufficient then the content should be legible. This is somewhat taken for granted, but requires care and precision when developing modern software where we have an enormous amount of creative choice: typeface, size, orientation, colour, border, gradient and so on. Examples of sites that consistently score highly on Web Accessibility and colour contrast are Sainsbury’s and Nationwide. Doubtless they will be benfitting from their investment given the fact that millions of people in the UK alone experience some kind of sight loss.

如果对比度足够，则内容应清晰可辨。 这在某种程度上是理所当然的，但是在开发现代软件时需要谨慎和精确，因为我们有大量的创意选择：字体，大小，方向，颜色，边框，渐变等。 Sainsbury's和Nationwide在网站可访问性和色彩对比度方面始终获得很高的评价。 毫无疑问，鉴于仅在英国就有数百万人遭受某种视力丧失的事实，他们将从投资中受益。

There are four principles in web accessibility that are a great way to think about what makes an application accessible as defined by WIA: Perceivable, Operable, Understandable and Robust (abbreviated to POUR). Colour contrast is largely about perceivability, the definition of which is “information must be presentable to users in ways they can perceive”. But, of course, they are all related — if you can’t see something clearly then it’s going to impair your ability to operate it or understand it.

Web可访问性中有四个原则，它们是思考WIA定义的使应用程序可访问的原因的好方法：可感知，可操作，可理解和健壮(缩写为POUR)。 色彩对比度主要与可感知性有关，其定义是“信息必须以用户可以感知的方式呈现给用户”。 但是，当然，它们都是相关的-如果您看不清某些内容，那么它将损害您操作或理解它的能力。

色盲 (Colour blindness)

Perceivability of content via colour contrast is relevant to all sighted users, but it’s important to understand the various types of colour blindness that people experience. The type of colour blindness depends on the number and efficacy of the cone cells in your eyes. The majority of people have three working types of cone cell (trichromats), whereas some people have only two functioning types of cone cell (dichromats), meaning their vision is likely impaired in some way. As a side note, scientists have recently discovered a new group called tetrachromats. This is a very small group of only women who have a forth type of cone cell, meaning their vision is especially good!

通过颜色对比可感知的内容与所有有视力的用户有关，但是了解人们经历的各种类型的色盲很重要。 色盲的类型取决于您视锥细胞的数量和功效。 大多数人有三种工作类型的视锥细胞(三色性)，而有些人只有两种功能类型的视锥细胞(双色性)，这意味着他们的视力可能会受到某种程度的损害。 附带说明，科学家最近发现了一个新的名为四色体的小组。 这是一小群只有圆锥形细胞第四型的女性，这意味着他们的视力特别好！

Thinking about Dichromats, the four main types of colour blindness that they are affected by are:

考虑到双色差，它们受色盲的四种主要类型是：

1. Deuteranopia. This is the most common type of colour blindness and entails a reduced sensitivity to green light

   十眼这是色盲的最常见类型，导致对绿光的敏感性降低

2. Protanopia. Reduced sensitivity to red light

   千变万化。 对红光的敏感性降低

3. Tritanopia. Reduced sensitivity to blue light but not very common

   Tritanopia。 对蓝光的敏感性降低，但不是很常见

4. Achromatopsia. People with this condition cannot see colour at all, but it is not very common

   色盲。 有这种情况的人根本看不到颜色，但这不是很常见

出现色盲(Experiencing colour blindness)

It’s one thing to describe a condition, but another thing to experience it. When designing products empathy is critical. In order to simulate what it’s like for someone with colour blindness to use a website we can use browser plugins such as Colorblindly. Here’s an example of what a user who has deuteranopia may see when viewing the Publicis Sapient website.

描述一个条件是一回事，而经历它是另一回事。 设计产品时，移情至关重要。 为了模拟色盲人士使用网站的感觉，我们可以使用诸如Colorblindly之类的浏览器插件。 这是一个示例，显示患有黄褐斑的用户在查看Publicis Sapient网站时会看到什么。

Tools like this are a great way to manually test your work. Before I talk about testing in more detail, let us first consider what standards we are testing against.

像这样的工具是手动测试工作的好方法。 在更详细地讨论测试之前，让我们先考虑一下要测试的标准。

Web内容可访问性准则 (Web Content Accessibility Guidelines)

The WCAG (Web Content Accessibility Guidelines) are a global standard organised into a set of categorised and prioritised criteria. The current version is WCAG 2.1, but it has included guidance on colour contrast for many years.

WCAG(Web内容可访问性指南)是一项全球标准，分为一组分类和优先标准。 当前版本是WCAG 2.1 ，但多年来它一直包含有关颜色对比度的指南。

The generally accepted minimum priority level is AA. When any web application is tested it should be clear from the results which level each feature has met.

公认的最低优先级是AA。 测试任何Web应用程序时，应从结果中清楚地了解每个功能达到的级别。

自动化的色彩对比测试 (Automated Colour Contrast Testing)

In order to catch issues as early as possible in the production process running audits on design collateral is highly valuable. Catching problems early is known as the “move left” principle as you are effectively moving an item to the left of your production timeline. Tools such as Stark can assist with this as they allow designers to run checks prior to development.

为了在生产过程中尽早发现问题，对设计抵押品进行审核非常有价值。 尽早发现问题被称为“向左移动”原则，因为您可以有效地将项目移至生产时间线的左侧。 诸如Stark之类的工具可以帮助实现这一目标，因为它们允许设计人员在开发之前进行检查。

When designers run checks on their work before handing over to developers, they are saving time and money whilst lowering the risk of defects.

当设计师在移交给开发人员之前对其工作进行检查时，他们在节省时间和金钱的同时降低了缺陷的风险。

No matter how much we move left, we still need to test colour contrast in our development pipeline. There are many mature accessibility auditing tools to choose from, though the most immediately available one is Chrome’s built-in tool Lighthouse. This can run an audit and report on a multitude of issues including colour contrast.

无论我们向左移动多少，我们仍然需要在开发流程中测试颜色对比度。 有许多成熟的辅助功能审核工具可供选择，尽管最直接可用的工具是Chrome浏览器的内置工具Lighthouse 。 这样可以进行审核并报告包括色彩对比度在内的许多问题。

Whilst Lighthouse is highly convenient, it is not the most thorough tool in the market. There are some great tools for designers such as colourcontrast.cc, which takes into account text size and font. For in-browser tools I would recommend using WAVE, which tends to pick up more issues than other tools. To run tests in your build pipeline I would recommend Pa11y as an open source option, which can be configured to test for a specific priority level on given URLs, like so:

虽然Lighthouse十分方便，但它并不是市场上最彻底的工具。 对于设计师来说，有一些很棒的工具，例如colourcontrast.cc ，它考虑了文本大小和字体。 对于浏览器内的工具，我建议您使用WAVE ，它比其他工具往往会遇到更多问题。 为了在您的构建管道中运行测试，我建议您将Pa11y作为开源选项，可以将其配置为在给定的URL上测试特定的优先级，如下所示：

Example Pa11y configuration file

示例Pa11y配置文件

If your project team take accessibility very seriously, I would recommend investing Tenon.io as it likely to pick up the most issues as explained here.

如果您的项目团队非常重视可访问性，我建议您投资Tenon.io，因为它可能会收到最多的问题，如此处所述。

非标准调色板 (Non-standard colour palettes)

The most common production problem that people raise with me is that accessible web applications inhibit creativity. Colour palette limitations are a primary contributor to this perception. I can understand how this view has formed — colour palettes that pass AA do indeed limit your choices of colour combinations. However, if we think about this problem a different way you can have both. Many accessibility problems can be solved by simply giving users more choice. Web browsers do a good job of this, by providing options for zooming and scaling content for example. If a colour palette is not accessible due to poor colour contrast, then we can simply offer users alternatives.

人们与我一起提出的最常见的生产问题是，可访问的Web应用程序会抑制创造力。 调色板的限制是导致这种感觉的主要原因。 我可以理解这种视图是如何形成的-通过AA的调色板确实确实限制了您对颜色组合的选择。 但是，如果我们以不同的方式考虑此问题，则可以同时使用这两种方法。 只需给用户更多选择，就可以解决许多可访问性问题。 Web浏览器通过提供例如缩放和缩放内容的选项来很好地做到这一点。 如果由于对比度差而无法访问调色板，那么我们可以为用户提供其他选择。

Let us say we’re working on Brand X and their style guide is full of striking, but inaccessible colours, we may agree to provide users with an alternative style sheet that allows them to view the content using a more legible set of colours. A trending example of this is the dark theme.

假设我们正在研究X品牌，他们的风格指南充满了引人注目的色彩，但是色彩难以接近，我们可能同意为用户提供替代的风格表，使他们可以使用更清晰的色彩来查看内容。 黑暗主题就是一个典型的例子。

An example of a dark theme option on a live website

实时网站上的深色主题选项的示例

This popular device has given millions of software users the option to consume content in a way that may be more legible for them whilst reducing the amount of power their device uses. If we take this a step further, we can provide users with an alternative stylesheet that they can switch to via the website itself or via their browser (something Firefox does).

这种流行的设备为数百万软件用户提供了选择，使其可以使用对他们来说更易读的内容，同时减少了设备使用的电量。 如果我们更进一步，我们可以为用户提供替代样式表，他们可以通过网站本身或通过浏览器( Firefox可以做到)进行切换。

系统偏好 (System preferences)

Major operating systems such as Windows, OSX, Android and Ubuntu all offer display setting that can improve legibility, such as high contrast mode. These can be enabled via the display or accessibility settings. They will override styles used by any software including web browsers and consequently your web application, though the results will vary.

Windows，OSX，Android和Ubuntu等主要操作系统都提供可提高清晰度的显示设置，例如高对比度模式。 这些可以通过显示或辅助功能设置启用。 它们会覆盖任何软件(包括Web浏览器)以及Web应用程序使用的样式，尽管结果会有所不同。

OSX provides a high contrast mode via the increase contrast option, which leaves the colours largely in tact but increases the luminosity between them.

OSX通过增加对比度选项提供了高对比度模式，该模式可以使颜色在很大程度上保持完好无损，但可以增加它们之间的亮度。

OSX accessibility display options

OSX辅助功能显示选项

The burning question is whether to bother implementing your own solution given that the operating system will give the user the control they need. The answer can only be found by testing. If your web application uses a vibrant but inaccessible colour palette and OS display changes do not improve the experience then you should implement an alternative or revise the palette.

迫在眉睫的问题是，考虑到操作系统将为用户提供所需的控制权，是否要实施自己的解决方案。 答案只能通过测试找到。 如果您的Web应用程序使用了充满活力但无法访问的调色板，并且OS显示更改并未改善体验，那么您应该实施替代方法或修改调色板。

未来的浏览器API (Future browser APIs)

In the future there may be a better way. The more the opertating system, broser and web application can co-operate the better. Currently on Windows there is a little known feature called ms-high-contrast that can be used to establish whether the user has high contrast mode or not. If the user has made changes to their Windows contrast settings the developers can complement this by presenting content differently.

将来可能会有更好的方法。 操作系统，broser和Web应用程序可以合作得越多越好。 当前在Windows上有一个鲜为人知的功能，称为ms-high-contrast ，可用于确定用户是否具有高对比度模式。 如果用户对其Windows对比度设置进行了更改，则开发人员可以通过以不同的方式呈现内容来对此进行补充。

Windows high contrast CSS properties example

Windows高对比度CSS属性示例

This is only supported in Windows Edge right now but there is a promising draft feature called forced colours that can be used in a similar way in any browser, provided they implement this feature. I’m really hoping this is adopted by the major browser vendors so that we can build smarter more accessible applications with less guesswork.

目前仅在Windows Edge中支持此功能，但是有一个很有前途的草稿功能，称为强制颜色，只要它们实现了此功能，便可以在任何浏览器中以类似方式使用。 我真的希望主要的浏览器供应商都采用这种方式，以便我们能够以更少的猜测来构建更智能，更易于访问的应用程序。

概要 (Summary)

In order to ensure your web application meets or exceeds WCAG AA be sure to consider colour contrast from the outset and put processes in place to monitor it. This should be a combination of automated and manual testing. An auditing tool may tell you that two colours used together have passed the test, but if there are people who struggle to see some content then make the necessary changes — accessibility is for humans, not machines.

为了确保您的Web应用程序达到或超过WCAG AA，请务必从一开始就考虑颜色对比度，并设置适当的流程对其进行监视。 这应该是自动和手动测试的组合。 审核工具可能会告诉您，同时使用的两种颜色已通过测试，但是如果有些人努力查看某些内容，则需要进行必要的更改-可访问性是针对人类而不是机器。

翻译自: https://medium.com/@rbultitudezone/web-accessibility-colour-contrast-774b2ded8778

a标签未访问颜色