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.
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.)
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).
色觉缺陷发生,因为一个或铁道部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
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.
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.
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.
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.
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.
Relying on tools for help＃第11节
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 Drasner’s 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.
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.
如果网站没有适当的颜色对比度（背景颜色顶部的文本颜色），那么网站的信息可能更难以看到或理解。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.
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.
带给我更大的重要性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?
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.
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.
不要假设哪种颜色难以看到 - 实际上做了研究和测试。至少，请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.
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
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
- The Myths of Color Contrast Accessibility- UX运动
- Resources for Designing for the Colorblind— We Are Colorblind
- The WebAIM Million
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.
其他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.