彩色工艺与对策:设计师的彩色视力缺乏的生活

那么,是盲目的盲目还是在网页设计和开发行业工作?在这篇文章中,我会回答这个问题,但鉴于我对设计的热情和现在我的职业生涯,这是我的想法始终是因素。我想知道有“正常”的愿景,让我变得更好地成长。我现在的工作会让我更好吗?我会追求更具设计为导向的职业生涯,而不是一个更加开发的设计职业?这些只是一些弹出脑袋的东西。

文章继续下面

至于我的工作和我的颜色愿景,否则,色盲不会影响我的工作,就像你的想法一样。在设计会议期间,我可以快速地指出,我们需要重新考虑我们的调色板。在审查布局时,我能够解释为什么我们需要评估如何用颜色传达信息。我喜欢,我可以为桌子带来一个单一的观点,是像我这样的人的声音;我能够提供其他人不一定拥有的见解。

When you can see a larger set of colors, it’s easy to gloss over those issues because they’re functionally invisible in the moment. If a design team doesn’t have a member who sees color differently, it’s important they find a way to test with actual users who do. There is no substitute for the real thing.

Between workarounds anyone can use when color-sensitive situations crop up, and knowing how to separate myth from actual, smart usability practices for vision differences (and which design tools to use)—I want to set the record straight on a few things about designing with color and designing for color accessibility.

什么是色盲#section2

The termcolor vision deficiency,或CVD,更准确地反映我的障碍类型。

当有人听到我是盲目的时候,大多数人立即认为我看不到颜色,因为我的整个愿景领域是灰度,我真正的颜色blind。这个术语是非常误导和令人困惑的,因为大多数与CVD一起生活能够看到许多颜色。(那里有一种被称为CVD的人“monochromacy,” which is complete color blindness. About 1 in 30,000 people are affected, and they see the world in shades of gray.)

红绿色失明是最具文化熟悉的类型,但CVD在定义中有很多有趣,更加多样化。

So what colors不能you see?#section3

我已经被问到了这个问题比我依赖的次数更多。我的答案总是一样的:我几乎不可能说。对我个人而言,颜色变得越来越难以区分他们的粗体。我可以坚定地证明天空是蓝色的,停车标志是红色的,草是绿色的,大鸟是黄色的。我可以看到those colors because—whether by design or by mother nature—they’re bold. But start placing certain colors adjacent to each other, and it becomes more difficult for me. There are no colors that I不能看到, rather, certain colors become muddied and start blending together. It’s not the same for everyone; that’s just my version of CVD.

As light sensors go,humans don’t have the best eyes for color。Truth be told, they’re subpar compared to most species. WE are dismally color blind—as a species.

On top of that, normal, “accurate” color vision varies from person to person; only minor anatomical differences determine whether your eyes are normal, “color blind,” or have extra (!) color vision powers. Let’s unpack all of that.

没有太过技术,我可以告诉你的是,我们的视网膜是对我们的颜色愿景负责。视网膜有两种主要的细胞类型: rods and cones. Rods are primarily responsible for reading brightness/intensity levels, while cones are more specialized for detail and for picking up a particular range of light wavelengths. A person considered to have normal color vision has three types of cones, one each for bandwidths of short, medium, and long wavelengths of light. The bandwidth each cone can perceive is shaped like a bell curve and is unique tothatcone insideyoureye, and there are overlaps between cones. Cones also don’t actually correspond to specific colors, but because long wavelengths fall more toward the red part of the spectrum, medium wavelengths hover closer to green, and short wavelengths tend toward blue, you’ll hear them called red, green, and blue cones, due to sheer convenience (Fig. 1).

三个钟曲线的光谱图(每个用于短,中,和长波长锥体的曲线),表示它们的典型范围和峰值响应点。

Fig. 1.用于短(M),介质(M)和长(L)波长的人体中的标准化锥形响应光谱。注意钟曲线的重叠性质,并且每个锥体的峰值灵敏度与红色,绿色和蓝色没有整齐地匹配。

色觉缺陷发生,因为一个或铁道部e of these cones is missing or has limited sensitivity (such as a narrow range), or when color perception in the brain is influenced by various其他现象。这意味着频谱中的那种颜色有效地“辍学”,但由于光线仍然存在,大脑将其转化为一种color based on peripheral data picked up by the other cones, combined with its brightness level.

由于颜色视觉是基于我们的眼睛和大脑感知光线,而且由于我们的眼睛有不同的遗传敏感性,我们可以说“准确”的颜色视觉有点主观。即使是“准确”颜色视觉的人也看不到同样的方式。

Some people even have a fourth cone cell in their retinas; “tetrachromats” have enhanced color differentiation due to extra sensitivity between red and green. The extra cone actuallycame standard for most mammals in the past, but ongoing studies have suggested that12% of the world’s women可能还有第四种类型的锥体。

其他e are some colors and wavelengths we can’t see because our eyes don’t have the right sensors, but for others, it’s due to anatomical make-up. The lens and cornea physically block very short wavelengths; it’s why we can’t see ultraviolet light directly, even though we have the sensor capability. For people with一种phakia(lack of a lens in one or both eyes, whether congenital or due to surgical removal), that’s not a problem; they see the color variations in near ultraviolet light naturally.

Inside look at living with CVDs#section4

我认为每个有CVD的人都有自己的一系列挑战。还有很多普遍经验丰富的情况,社会和职业障碍,以及我们预期的歧视和欺凌的形式悄然忍受。

视觉残疾和颜色视觉差异通常被视为古怪的,在正常视觉和“盲目”之间的一些神秘地图上的娱乐现象。CVDS的人们遇到居高临下的言论和消除治疗作为日常生活的一部分。这是一种隐形和误解的斗争,不必那样。我想有所作为,它旨在教育这个话题的愿望。

Insults and passive-aggressive comments#section5

我ve heard my fair share of passive-aggressive comments about my career choice. Also about my passion for art and design. Because如果我看不到颜色,我怎么可能是设计师?

A question like that is condescending on two levels. One, it’s as if no one should be allowed to be an artist unless they can see colors accurately. And two, it shows a complete insularity or misconstrued awareness about color vision deficiencies.

如今,我主要作为前端开发人员工作,但在我的职业生涯中,我在Photoshop中设计了Web布局。我没有任何代码。我甚至没有写HTML。我从未有过颜色的问题,因为我通常从客户的企业品牌指南开始,所以我能够拍摄那些颜色并使用颜色调色板发电机来帮助我构建我的设计的外观。我从来没有召唤过糟糕的颜色选择,所以我觉得我做得很好。直到我与老板谈话,一个男人,我抬头作为一名专业人士,当我放下我的警卫并提到我是盲目的盲目。然后他继续质疑我的整个决定追求我喜欢的职业。对于一个新的专业,这是一个非常粗糙,更令人失望的遇到,以便至少可以来说来处理。

Justifying my skill set#section6

It feels as though I have had to justify my career decisions and my skill set on a regular basis over the years—as if CVD prevents me from being good at my job. By and large, it’s truthfully not something that comes up most of the time in my day-to-day work.

在这一点上,大多数同事只发现我有一个CVD,如果我谈论它。有时候我甚至可以看到在局面发生之前可以延伸多少个月,所以我可以提到它。多年来,它已成为一个日益较小的问题,与更新的软件和网络技术如何,我可以在需要时使用。

Life via form factor (or winging it)#section7

Think for a moment about ways that color is used to convey information in the world around you. One thing that comes to my mind would be traffic lights. Color is used to let drivers know how they should proceed. No additional information is provided in case a driver is color blind. Traffic lights also use two of the colors most commonly associated with color blindness: red and green. Thankfully, most traffic lights have a common form factor. The top light is red, the middle light is yellow, and the bottom light is green. Even if I couldn’t tell the color, as long as I can tell which light is lit, then I’m able to get the necessary information.

不幸的是,并非所有设计都是平等的;可能没有次要或补充指标。当某些东西只用颜色传达时,这是一个差距,信息可以在一大群人身上丢失。

日常社交互动#section8

Exchanging stories with others who grew up color blind sounds unfailingly familiar. Most of us have had similar experiences when it comes to people first finding out. As in part Q&A, part dog and pony show.

我们是constantly问:“这是什么颜色?”(指向附近的对象)和“What color does this look like?” Then we watch as the person who asked us the question has their MIND BLOWN because we can’t see the correct color. Meanwhile, getting the color correct can sometimes be worse. First, there’s a look of confusion on the asker’s face. They can’t comprehend how we can both be color blind同时看到颜色,导致更多问题和“测试”。它轮流了可能简要交流融入冗长和技术谈话,可能在糟糕的时间或不方便的位置。

What I ended up learning is that these encounters will never go away, since most people I come into contact with have no knowledge about color blindness. I can either get annoyed by getting asked so many questions, or I can use it as an opportunity to educate.

经过职业#section9

The first time I was passed over for a job specifically due to my CVD was when I was a teenager. It was a part-time job after school, and I was told—point-blank—it was because I’m color blind. A position had opened up in the frame shop at a big-box crafts store I’d been working at for over a year. After having been told I was getting the position, my boss somehow found out I’m color blind, then informed me that I wasn’t qualified to work in the frames department for that very reason. That was it, no discussion. I had to watch the position go to one of my coworkers.

这可能是我少年雷达的小昙花一现,但我意识到这是许多人中的第一个。在多年来,我在各个工作中处理了各种工作的歧视和挫折之间,我最终说服了自己不要告诉新的雇主或同事关于我的颜色视觉缺陷。如果我被问到,我不会撒谎,但我不会提出未经请求的信息。

在Web行业工作多年后,我最终转向了一种新的方法。At this point, I have successfully proven to myself that my color vision deficiency doesn’t negatively impact my job, and that bringing it up via the lens of accessibility makes it more of a natural thing I can discuss with coworkers so we can put it to constructive use on projects.

里面看看我是怎么做的#第10.

Relying on tools for help#第11节

作为专业的前端开发人员和CVD的设计师比以往任何时候都更容易,因为那里有很多工具和资源。专业,我依靠着色选择器工具,提供预定义的颜色组合,图像编辑软件的网站,并且只有所有颜色都可以由十六进制值表示的事实。

In front-end tasks, I’m able to modify my code editor to suit my needs, for instance. I can use light or dark mode and a wide variety of color themes. I often use high-contrast themes that have been thoughtfully designed for developers with color vision deficiencies.

我定期使用的工具和资源:

  • 格雷尔 -Trello有一个很好的项目标签功能,考虑了CVDS。用户不仅可以根据颜色标记卡,它们还可以使用条纹,曲折,圆点,尖锐的线条等形状。
  • VSCode —Visual Studio代码是我首选的代码编辑器。我m able to customize the interface with pre-built themes, and I can further modify those themes if I need to. I’m currently using one called Vue Theme, which I feel works really well for me. I choose themes based on what feels like the appropriate color contrast for my specific color vision deficiency. I lean toward dark backgrounds with brighter, higher-contrasting text colors that stand out against the background color. Another one of my favorites isSarah Drasners Night Owl theme
  • Dev Tools —Whether it’s Chrome, Firefox, or Safari, I am constantly in the browser’s dev tools. There’s an ever-increasing number of features in dev tools that I can use to get the color information I need. Something I find handy is being able to Shift + click on a color value to cycle through various color formats (3 digit and 6 digit hexadecimal, RGB, HSL, and color name).
  • Color Pickers— I installed a color picker Chrome browser extension called眼药水器帮助我快速抓住网页的颜色。它允许我从任何网页上进行样本,并为我提供各种格式的颜色。这为我提供了次要保证,即我在我的CSS中写的颜色是真正的。我希望我能够相信代码,因为我在Dev工具中看到它,但偶尔我的眼睛在我身上扮演技巧 - 我会发誓我看到的颜色在屏幕上渲染的颜色不是Dev工具中的颜色值。当我认为这是问题时,我可以抓住眼药水和三重检查。
  • Contrast Checker —我用Webaim对比检查员to make sure that the colors I’m using are in compliance with the guidelines.

无障碍和inclusion#第12部分

Statistically, 1 out of every 12 men and 1 out of every 200 women have a color vision deficiency. Across the world,大约3亿人是色盲。Those are significant numbers to factor in, especially if all those users are hampered by usability issues. Color alone can prevent them from completing interactions, receiving pertinent information, and from having the same experience as users with better color vision. That last fact alone is reason enough to pay attention to the concerns outlined here.

Color disabilities and the Web Content Accessibility Guidelines#第13条

Theada.doesn’t specifically call out color blindness; it simply refers to visual disabilities. However, the Web Content Accessibility Guidelines(WCAG) does specifically mention color。Compliance with the WCAG helps as a first step toward ensuring your site is usable by everyone, regardless of disabilities, but keep in mind that there could be additional factors at play with your site which may be “compliant” but still create difficulties for users.

Color contrast#第14部分

对于那些拥有CVD的人来说,一个更普遍的问题之一是一个网站的颜色对比;特定颜色的麻烦并不一定意味着我们将对网站遇到麻烦。

如果网站没有适当的颜色对比度(背景颜色顶部的文本颜色),那么网站的信息可能更难以看到或理解。Webaim,非营利组织,2019年发布的报告和2020年概述一种ccessibility issues in the top one million home pages。截至2020年2月,86.3%的家庭页面测试了对比度不足。

那么,这是什么意思?这意味着对每个人的信息都没有传达给每个站点的信息。那是863,000个最具影响力和高交通的网站on the web delivering an unequal user experience to billions of users worldwide on a daily basis.

Data visualization#第15部分

Color contrast is not the only issue when it comes to color blindness and accessibility. Data visualization is one area in particular that often relies heavily on color to convey information. It is also a prime example of what the WCAG mentions in their success criteria:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

– Web Content Accessibility Guidelines 2.1 – Success Criterion 1.4.1 Use of Color

我遵循Twitter上的一些帐户,引起了对数据可视化中颜色的不当使用。我建议开始使用这些 - 他们提供了很多有用的信息,并提高了我们与CVD Face的问题的围绕问题:

值得庆幸的是,制作图表,图形和其他可视化辅助颜色可访问并不困难。无需完全删除颜色。只需尝试使用色彩友好的颜色调色板,不要使用有问题的颜色组合。确保图表中的所有数据都适当地标记,以便您的读者可以以多种方式获取信息。我们的数据- 科学的在线出版物,重点关注贫困,疾病,气候变化,战争和不平等等大量问题 - 有了我认为要考虑的各种类型的数据可视化的优秀示例。

Whenever possible, I try to provide feedback from the perspective of someone who has a CVD, but I don’t make recommendations for specific color changes; I leave the color choices to those who aren’t color blind. Instead, I describe which elements I find difficult to interpret, and why. I tell them which information is getting lost on someone like me. The hope is that my feedback informs other designers of the need to make charts, tables, graphs, and maps more inclusive.

Adding people with a CVD to your team#第16部分

As far as those of us who do have a CVD and work in the web industry: we are just as skilled and knowledgeable about our professions as anyone else, and there are plenty of ways that we can contribute to the visual aspects of projects—especiallyregarding color. We have the ability to review designs and report back whether any information is getting lost due to poor color contrast. We can inform designers if the chosen color palette is problematic. We can be the test subjects for our fellow UX designers during their usability research.

还有另一点我想在这里遇到。有一种常见的误解,即具有CVD的设计者没有能力有效地完成工作。招聘经理和其他同事经常致力于这一假设。与相反的是,有CVD的人有他们努力解决他们的局限性的方式。我前面提到了我个人用来帮助我的不同工具。像我这样的网络行业专业人士在他们所处理的工具中使用特征,让这项工作做得正确,因此无缝地没有人会猜到它们是色盲。

带给我更大的重要性f hiring people with disabilities. I won’t go into the many, many,许多公司应该这样做的原因。相反,我会从设计角度提到一些好处。

First and foremost, if you don’t have a disability, then how can you say conclusively that you know your product will work for those who do?

答案是,你不能。没有正确的测试。当然,有公司在那里可以帮助设计师和开发人员进行可用性测试。但是,如果您拥有团队成员,那么在每个项目的持续时间内都可以为您提供那种宝贵的反馈的团队成员,这是多么惊人想想你积累了你职业的所有知识。想想你可以教他别人的所有智慧。现在考虑所有具有残疾队友可以通过的知识和智慧传递给您。您可以让您的产品真正包容。试图单独做,总是产生和加强局限性。

关键的CVD提示您的项目#section17

Color can enhance the message, but shouldn’t be the messenger. UX and UI designers have within their power the ability to take color blindness into consideration—or to ignore it. You can make sure information is conveyed to everyone, not just people who see color “normally.” That is a great responsibility, with real life-or-death repercussions at stake for many users.

For those of us in the web industry, there are specific action items I’d like you to take away from all this.

为“大家”设计颜色调色板#section18

Carefully plan your color palette—not for those who are color blind, but foreveryone。Always keep in mind that ALL the information you provide in your product needs to be easy to recognize and easy to understand by anyone who touches it. We can get too familiar with what we’re doing and forget that information is delivered in multifaceted ways, so we need to be mindful of what’s specifically being conveyed by color.

I highly recommend Geri Coady’s book,Color Accessibility Workflows;it’s a fantastic resource. In it, she discusses color blindness, choosing appropriate color, compliance and testing, implementation, providing alternatives, and she includes some tips and tricks.

不要假设,并小心你问的东西#section19

不要假设哪种颜色难以看到 - 实际上做了研究和测试。至少,请check the color contrast in your layout

The reason I say that is because although the ADA doesn’t call out color blindness specifically, it does call out visual disabilities. In the U.S., it is illegal in the workplace (not to mention insulting and unwise) to ask people if they have a disability. In my book, that also applies to color blindness, and while it may not be illegal to ask in non-work contexts, it is definitely personally intrusive.

但是,如果人们志愿者帮助您测试,他们提供有关自己的信息,那是一个不同的事情。它也可能是一个很好的想法,可以联系到一些专门从事残疾人的用户测试的公司。

公司等公司Level Access帮助组织将可访问性纳入日常工作流程。它们提供量身定制的培训,审计服务,文件补救和其他服务,以帮助组织实现 - 并保持遵守Section 508和the WCAG.

Test with colorblind simulators AND colorblind users#section20

Don’t rely on colorblind simulators alone. I could write an essay about this topic. Those simulators are not accurate enough to give you a proper understanding of color vision deficiencies.

Seek out first-hand perspectives#section21

实际上与有颜色视野缺乏的人交谈以获得他们的观点,并倾听开放的思想。我不能推荐这一点。没有更好的方法来了解它与CVD相比之下的人比听到它第一手。

Stand up for coworkers and users#section22

Don’t make light of color vision deficiencies. It’s difficult enough living with it, let alone being an artist with it or trying to make sense of information you literally can’t see.

Tools and further reading#section23

Accounts on Twitter#section24

Usability and UX#section25

组织资源#section26

颜色感知和大脑#section27

Continuing to make progress#section28

Loving design is something that has always come naturally to me; I didn’t have to force myself down this path. Growing up, I didn’t know that I wanted the exact job that I have, but by the time I graduated high school in 2000, I knew that I wanted to combine my passions for art and computers.

我很感激足够长的时间来观看网络社区进化到今天的东西。我很感谢所有存在的工具,以帮助我尽管我的颜色视觉缺陷来做我喜欢的事情。我很感谢WCAG认可的色盲,并对生活在彩色视觉差异的人来说,这一考虑因素。

其他e is a lot of information out there, and I recommend that people go out and read as much as they can on the topic. If you’re on Twitter, then follow people who have a CVD, or the organizations that deal with it in various ways. There is so much knowledge that can be gained by doing some simple research and adding it into your workflow.

About the Author

Noah Glushien照片

Noah Glushien

Noah Glushienis a front-end developer and accessibility advocate. He currently works at the US Holocaust Memorial Museum and helps teams build online exhibitions centered around story-driven designs. Previously, Noah worked at TechTarget in Newton, MA, developing custom solutions for Microsoft, Dell, HP, Oracle, Intel, and many others. Noah began his career as a web designer in 2003, creating layouts in early versions of Photoshop before eventually realizing he also had a passion for the code that drove those designs, and he was quick to jump into a career that was a combination of both.

No Comments

有话要说吗?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Webwaste

在这摘录世界范围的废物中,格里麦戈尔恩检查了臃肿网站和不必要资产的环境影响。
行业

连接点

在创意文化的摘录中,Justin Daeer通过许多方式来浏览我们,其中一个组织的文化和设计工作会彼此发挥作用。
事业