解决可访问性调色板的谜语

破解代码δE的感知能力。

6分钟阅读 7月25日

- - -

卡通插图和一个男人站在岩石上的大型彩色彩虹、风格的复杂映射的世界,平静的对称性,全景
解决可访问性面板谜语,@ups.ai.down,Midjourney

我们在生理上独一无二的个体,可通过我们的指纹,DNA和虹膜。细胞在我们眼前大脑细胞这一过程我们看到排列在每个人独有的。我比你感受不同的颜色,和你的看法不同于你的伴侣,朋友,和同事。

生理缺陷影响每个人的方式不同。考虑protanomaly,一种轻微的红绿色盲影响红的看法1%的人口;人与人之间不同强度的影响。我们谈论60%的障碍吗?70% ?30% ?有什么并发损伤,如绿色弱视,影响到5%的人口的绿色观念?到什么程度?它影响一只眼睛吗?还是两个?

因为我们所有的感知世界通过我们独特的颜色棱镜,它是不切实际的依靠个人感知测量可访问性。

因此,当我们把颜色从剩下的这幅画吗?

同样的英雄形象照片,黑白的。
黑色和白色版本的英雄,@ups.ai.down,Midjourney。

都是灰色。对比。

光。

它的子集,相对亮度,占我们无法处理x射线和红外线-我们共同的基线。因此,作为科林·斯坦利解释说,对比两种颜色之间的亮度的距离。”

图感知亮度的sRGB 12步色轮由科林·斯坦利在混合颜色的亮度-第1部分。结果表明,黄、绿、石灰、水鸭,和青色自然相对亮度高,表明这些颜色,在完整的饱和度和亮度,将对白色反差较低。
图形的感知亮度sRGB 12步色轮——科林•斯坦利混合颜色的亮度-第1部分

距离的概念解释了为什么亮黄色,石灰、绿色、蓝绿色、怀特和青色永远不会工作:他们的亮度太近。

黄色、石灰、绿色、蓝绿色和青色的颜色与白色与各自的相对亮度和对比度。它显示了一个高亮度和低对比度之间的相关性对白色。
黄色、石灰、绿色,蓝绿色,对白色和青色相对亮度和对比度。

感知到的光的量决定了相对亮度。因此,它很容易相信修改颜色的光度创造了更多的距离,从而更多的对比。但这种方法是错误的,因为Lea Verou挑战她的华尔街日报的文章

从亮度亮度是一个截然不同的因素。它的价值源于另一种颜色空间,奥软尽管被用于对比检查,不是感知制服。尤金Fedorenko的创造者访问面板,写了一个优秀的和全面的关于这个主题的文章

可视化表示的颜色光谱与高速逻辑值和它们的光度值对华尔街日报统一的亮度。
奥软的区别和华尔街日报,直观地解释亚当菱形花纹“禄亮度与奥软轻”2022年12月,

加强我们的工具

奥软不占人类感知颜色。修改后的输出亮度- L在奥软是雾蒙蒙的或是白垩色调,造成48%的设计师宣布他们访问的色调调色板他们沮丧

例如,唯一的颜色# DFF0D8 3:1对比(浅绿色)# 4 e974f(深色的绿色),但是225年类似的绿色匹配的对比度

技术,生成类似的颜色与可访问性测试它们,并不新鲜:Tanaguru开源小组找到了答案2016年,甚至可能之前。他们的算法使用欧氏距离寻找相似的颜色的RGB空间。

然而,RGB,不占人类感知颜色。为此,我们需要使用δE 2000。设计的国际照明委员会(CIE)作为一个等效的欧几里得距离实验室/禄空间,比较明显的颜色是如何通过人类的眼睛

因此,如果我们的搜索范围内实验室/禄颜色与δE,我们应该找到最接近的颜色,访问在225年早些时候讨论颜色。

易访问的颜色是什么?

这个空间是有益的,当寻找平衡的原始颜色亲密,可访问性和亮度。然而,这种方法每一个一个存在今天有一个重要的警告。

设计师的艰巨过程经历了创建一个调色板可以访问证明的斗争。首先的仔细选择面板,然后可访问性检查。如果我们有一个更快的方法来识别哪些颜色满足方针,同时探索和谐?

如何实现可访问性在呼吁其他色调调色板,说,split-complementary吗?在其他条款:易访问的调色板是什么意思?是所有颜色匹配的对比度之间彼此吗?所有的对主还是中性?其中,深色或浅色背景?

可视化表示split-complementary颜色:红色,绿色,青色和中性色搭配。
绿色和青色split-complementary颜色的红色1 (# FF0000)对中性色(# FFF5F5和# 190000)和搭配。

亮度的好处

黄色与白色的:你应该减少黄色的相对亮度吗?还是白色的呢?

黄色:亮度benefit-example的黄色与白色与黑色(对比度1.07:1)和(对比度19.55:1)。
黄色:亮度benefit-example的黄色与白色与黑色(对比度1.07:1)和(对比度19.55:1)。

物理和数学提供一个直截了当的回答:如果相对亮度超过60%(或0.6)的风险,一个深点的颜色将创造更多的对比,反之亦然。

我称之为亮度的好处,也被称为相反极性。对比度的导数计算,它已经使用了几十年确定一个文本应该出现在有色背景黑色或白色。Adobe使用相同的颜色对比分析仪

Adobe的对比截图显示亮度在行动中获益。
Adobe对比分析仪截屏显示亮度在行动中获益。

亮度的好处在我们的搜索是一个有用的指标一致,颜色。然而,它并不提供指导创建和谐的调色板。

解决这一问题

Adobe颜色依赖RYB模型(红、黄、蓝三原色)中使用几个世纪以来艺术计算颜色模式。它生成两个色调,然后转变成HSB颜色区分饱和度和黑暗的空间。一个简单的研究显示了方法的一致性。

Adobe色彩饱和度/黑暗计算图类似的和谐模式,显示所有色调的饱和度下降了5,只有一个变化他们的亮度下降了9
Adobe色彩饱和度/黑暗计算图类似的和谐模式

使用相同的方法和耦合用δE颜色搜索访问,我们可以生成色调至少3和4.5对比比率。这些颜色可以测试的中性色的主要颜色,正当提出开源颜色系统

图显示的最小对比来实现在一个可访问的调色板(2色调在3:1和2变化在4.5:1)
图显示的最小对比来实现在一个可访问的调色板(2色调在3:1和2变化在4.5:1)

可访问性解决了吗?哦,不是那么快。这与工作模式,呼吁微妙程度变化对车轮,如单色和类似的,因为它们的颜色很可能与中性色。

单色、相似和互补色调色板基于红1 (# FF0000)和他们的对比与中性色(# FFF5F5白色红色,和# 190000 off-black红色)
单色、相似和互补色调色板基于红1 (# FF0000)和他们的对比与中性色(# FFF5F5和# 190000)

但是现在,让我们看一下红绿互补的一对,例如。数学上,这对实现一个3:1的对比。然而,这对任何人来说都将是一场噩梦红色盲或绿色盲

Adobe解决了这个问题在他们的色盲安全工具画的颜色了线的混乱,即使他们认识到“对他们的过于简化实际问题。”

Adobe色盲安全截图,显示冲突的Adobe所产生的类似的调色板的颜色。色调是红色,橙色和红色。Adobe色盲安全显示颜色太接近另一个为红色盲模拟后,绿色盲,蓝色盲。
Adobe色盲安全截图,显示冲突的Adobe所产生的类似的调色板的颜色。

值得庆幸的是,在2012年、韩、柳发现,一个*的价值实验室的颜色空间代表了红绿的颜色和比例b *yellow-blueness,迭代更新循环的b *价值是有效地走出困惑。

改变我们的视角

他们的算法会产生一对Magenta-Green而不是红绿。但这是那么糟糕吗?

汉& Yoo confusion-line分离算法仿真结果为红色盲与绿色盲,显示原始图像,2图片重新着色,(一个为红色盲,一个用于绿色盲),和2模拟图像的感知形象
汉& Yoo confusion-line分离算法仿真结果为红色盲与绿色盲小说Confusion-Line分离算法基于颜色分割色觉缺陷、韩、柳和金姆,成像科学与技术学报,2012。

易访问的调色板的关键是我们是否需要对颜色在一起。因此,两个场馆开放在我们面前:

  1. 使用一个包容性的颜色对,或
  2. 使用中性的颜色。

这意味着也许我们不应该把黄色与白色但是找到一个补充其发光的颜色,如深蓝。

配对的例子对中性的颜色(黄色变成了芥末如果搭配白色)或颜色,黄色的相对亮度(一个深点的颜色如深蓝)
配对的例子对中性的颜色(黄色变成了芥末如果搭配白色)或颜色,黄色的相对亮度(一个深点的颜色如深蓝)

设计师没有办法解决这个只需单击一个按钮。可访问性工具不太发展提供一个可行的答案。

但如果…怎么办?

易访问设计系统的例子显示中性色为绿色,互补色调色板,色盲配对安全访问
一个易访问设计系统,基于互补色和谐,每设计和从头开始。

一个算法设计了上面的安全访问和颜色设计系统。计算超过45000排列在不到一秒钟的时间。它不仅仅是一个开发人员手工处理或计算的思想。

也许,挑战的难题是为什么我们仍然要求设计师来解决这个问题。

- - -

- - -

引导用户体验教授。设计师。编码器。

Baidu