js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力?

js设置css色相旋转

Hue rotation is often an easy way to change the appearance of a plot or figure without the need to create a new colour bar. However, when dealing with colourblindness, it is important to ensure that the spacing between colours is sufficiently distinguishable. Theoretically, these should remain the same, however often a practical demonstration is still required to put our minds at ease.

色相旋转通常是更改绘图或图形外观的简便方法,而无需创建新的颜色条。 但是,在处理色盲时,重要的是要确保充分区分颜色之间的间距。 从理论上讲,这些应该保持不变,但是仍然经常需要进行实际演示才能使我们放心。

选择颜色方案 (Selecting a colour-scheme)

Although it is possible to create a custom colour scheme, for simplicity the script written will only use the scale-chromatic schemes within d3:

尽管可以创建自定义配色方案,但为简单起见,编写的脚本将仅使用d3内的比例色方案:

And for this article, only the Magma colour scheme shall be explored. If you wish to see any others — see the link at the end.

对于本文,仅应探讨岩浆配色方案。 如果您希望看到其他任何人,请参阅结尾处的链接。

magma color bar
d3.interpolateMagma()
d3.interpolateMagma()

可视化整个色相-旋转光谱 (Visualising the full hue-rotation spectrum)

Hue-Rotation ranges from 0 to 360 degrees. To do this we divide our screen width into 20-pixel segments, where the leftmost segment corresponds to a 0-degree rotation and the rightmost a full circle (360 degrees) rotation.

色相旋转范围为0到360度。 为此,我们将屏幕宽度划分为20个像素段,其中最左边的部分对应于0度旋转,最右边的部分对应于整圈( 360度 )旋转。

magma colour bar rotated in steps up to 360 degrees
hue-rotate(0deg) .-> hue-rotate(180deg) -> hue-rotate(360deg)
色相旋转(0deg).->色相旋转(180deg)->色相旋转(360deg)

全色盲 (Total-Color Blindness)

The best way to check if a scheme is a colourblind-friendly is to look at it in black and white. Although very rare, these are conditions where all cones in a person's eyes are damaged.

检查方案是否对色盲友好的最好方法是用黑白两种颜色查看它。 尽管非常罕见,但这些情况会损坏人眼中所有视锥细胞。

Examples for imperfections on all cones (black and white)

红色-看到红色的能力降低 (Red — Reduced ability to see reds)

Example for damaged red cones.

绿色-看到绿色的能力降低 (Green — Reduced ability to see green)

This is the most common type of colour blindness

这是色盲的最常见类型

Example for damaged green cones

蓝色-降低看布鲁斯的能力 (Blue — Reduced ability to see blues)

Example for damaged blue cones

If a colour bar consists of well-spaced colours, hue-shifting these does not affect its ability as a colour-blind pallete. The best way to determine the effectiveness still remains to view the colours of a figure in monochrome, and observe a distinguishable gradient.

如果色条由间隔良好的颜色组成,则将这些色相移动不会影响其作为色盲调色板的能力。 确定有效性的最佳方法仍然是查看单色图像的颜色并观察可分辨的渐变。

互动示例: (Interactive Example:)

To explore how hue rotation affects different types of colourblindness you can have a play with the following Observable Notebook:

要研究色相旋转如何影响不同类型的色盲,您可以使用以下可观察的笔记本进行操作:

翻译自: https://uxdesign.cc/does-hue-rotating-a-colorscheme-retain-its-ability-to-be-colourblind-friendly-148dc790205c

js设置css色相旋转

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274610.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ux设计中的各种地图_在UX设计中使用阿拉伯语

ux设计中的各种地图Last year I got to work on an app that was ultimately going to be deployed globally in every market and every language including RTL (Right-to-Left) languages — with a specific focus on Arabic.去年,我开始致力于开发一个应用程序…

如何为前端项目一键自动添加eslint和prettier的支持

本文来自读者那个曾经的少年回来了 写的源码共读35期笔记文章,授权投稿,写的真好。本文参加了由公众号若川视野 发起的每周源码共读活动,点此加我微信 ruochuan12 了解详情一起参与。本文属于源码共读第35期 | 为 vite 项目自动添加 eslint 和…

极端原理_为极端而设计

极端原理*You can also read this article in German here.*您也可以 在此处 阅读 德语文章 。 In this article I’m going to draw on the Design thinking concept of designing for extreme users and I will argue that designing for extreme users can be considered a…

当CV工程师碰到了拷贝粘贴的需求——useClipboard的使用及源码解析

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…

ux和ui_从UI切换到UX设计

ux和uiI still remember those days, when I was a soon-to-be graphic design graduate who started to question what my future will be. At that time, I realized that I loved graphic design, but I wasn’t sure if I enjoyed doing it. Creating logos, posters, broc…

春季招聘后前端工程师的就业指南

尽管疫情反复,大厂裁员,招聘季仍是在困难中有条不紊地落下了尾声。回顾今年的春季招聘,北京青年报记者发现,互联网“大厂”依然对“研发岗”需求最为旺盛。但许多企业最近都在围绕“降本提效”来进行业务调整,这对技术…

探索式测试的思维模型

上一章介绍了探索式测试的定义。在实际项目的测试执行过程中,读者是否曾遇到如下的几个现象: 测试人员按照一个测试用例来执行测试,得到的程序输出与预期输出不一致。 测试人员判断程序的行为并不是缺陷,但根据新的输出想到了新的…

图解Git分支和命令

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…

vsco_VSCO重新设计:更直观,更简化的界面

vscoAmong the many photo-editing apps, VSCO has definitely become a popular favorite among both experienced photographers as well as “aesthetic” Instagram users. However, my interaction with the app starts and ends with using a few key filters and (maybe…

浅谈前端埋点监控

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外&…

css版式_第2部分:使版式具有响应能力,并为以后的版本奠定基础

css版式The feedback I’ve received over the past week has been amazing, and matches my own excitement about this project. I’ve spent a lot of time researching, writing, and teaching about creating better typography for reading on digital devices over the …

BBS项目--登录

BBS阶段性测试总要求 django登录报错 Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。 原因分析:出现这种情况在Windows中很常见,就是端口被占用 解决措施:这时我们只需改一下端口便可以了 登录前端页面(HTML…

【声明】

我的公众号和朋友圈有时会有一些课程推广广告,微博的收入来源。我接的广告一般来说都是比自己去买会优惠不少,我也会想方设法争取到更多福利(优惠)。买过的都知道确实优惠。如果有人看到觉得不合适,不想看到&#xff0…

怎么实现页面友好跳转_如何实现软,友好和一致的UI设计

怎么实现页面友好跳转重点 (Top highlight)Design trends are constantly changing, aren’t they? Each month there is a new visual effect or a trick that becomes “设计趋势在不断变化,不是吗? 每个月都有一个新的视觉效果或技巧,成为…

前端趋势 2022

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外&…

lightroom预设使用_在Lightroom中使用全景图增强照片游戏

lightroom预设使用Everyone here has taken a panorama with an iphone. We’ve spun around in a circle, trying to keep that arrow right on the line, and more than likely ended up with a strange, squiggly, horizontal photo. Every so often you might get lucky an…

第91次TC39会议举行,这还是我认识的JS吗?

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

android调节音量——AudioManager的应用

Android中可以通过程序获取系统手机的铃声和音量。同样,也可以设置铃声和音量。Android中给出了AudioManager类来实现音量获取、音量控制。本篇基于 Android API 中的 AudioManager 作讲述,最后给出实例。下面是本篇大纲:1、认识 AudioManage…

静态创意和动态创意_再次发挥创意需要什么?

静态创意和动态创意重点 (Top highlight)According to Oxford dictionary, creativity means “1. Inventiveness. 2. the use of imagination or original ideas to create something.”根据牛津词典,创造力意味着“ 1。 创造力。 2.利用想象力或独创性的思想来创造…

我写了 ahooks 源码分析系列,收到官方邀请我一起维护,这是一次提 PR 的记录...

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…