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.pswp.cn/news/274610.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274610.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274610.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Tyvj 1921 Freda的煩惱

我就不說是CF hot days 原題了,我會告訴你使用Math庫是因為一開始偷懶不想寫Min函數么- 1 Uses math;2 Var n,m,i,t,tt,x,cost,ans,tmp:qword;3 Function min(x,y:qword):qword;4 Begin5 if x>y then exit(y);6 exit(x);7 end;8 Begin9 readln(n,m);10 …

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 和…

Server.Transfer方法在頁面間傳值

a.aspx頁面代碼: protected void Button5_Click(object sender, EventArgs e){Server.Transfer("b.aspx");}public string name{get{return this.TextBox1.Text;}} b.aspx頁面代碼: private void TheFour(){a newWebContext.Handler as a;//創…

極端原理_為極端而設計

極端原理*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余篇源碼文章。歷史面試系列。…

centos利用tar包安裝phpmyadmin

我的網站根目錄地址為/var/www/html,phpmyadmin安裝包在/tmp下。 注意:php版本低于5.1的建議安裝phpmyadmin2.11,因為phpmyadmin3.3對php版本的最低要求是php5.2 1 [rootCentOS ~]# tar -zxvf /tmp/phpMyAdmin-2.11.9-all-languages.tar.gz …

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…

不同長度數據項的排序

注:本文改編自windmissing博客,感謝作者整理! 題目: a)給定一個整數數組,其中不同的整數中包含的數字個數可能不同,但是該數組中,所有整數中總的數字數為n。說明如何在O(n)時間內對該數組進行排…

淺談前端埋點監控

大家好,我是若川。持續組織了近一年的源碼共讀活動,感興趣的可以 加我微信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…

Win7 訪問共享時輸入正確密碼仍然提示密碼錯誤

1、直接按下winr鍵,輸入secpol.msc,打開本地安全策略。 2、找到“安全設置”的“本地策略”的“安全選項” 3、在右邊一欄找到“網絡安全:LAN管理器身份驗證級別”,雙擊進入 4、在默認狀態選項下,英文版應該為"no…

怎么實現頁面友好跳轉_如何實現軟,友好和一致的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余篇源碼文章。歷史面試系列。另外&…