id: bb19ee83a16249cda575bdfa1b25e191
parent_id: 
item_type: 1
item_id: 8f4c0320315948a2b169d03d589d3986
item_updated_time: 1764345477905
title_diff: "[{\"diffs\":[[1,\"長時間瀏覽網頁眼睛不舒服嗎？快使用高對比模式 (Chrome 套件)\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":34}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>長時間瀏覽網頁眼睛不舒服嗎？快使用高對比模式 (Chrome 套件)</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"application-data:2525275\\\" content=\\\"6692893/s30/fe1384e8-5fd6-4314-86fb-74aa1f195cdc/app.yinxiang.com\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"10625\\\"></a>\\\r\\\n<h1>長時間瀏覽網頁眼睛不舒服嗎？快使用高對比模式 (Chrome 套件)</h1>\\\r\\\n\\\r\\\n<div><span><div style=\\\"-evernote-webclip:true\\\"><br/><div><div><div><div><h1>長時間瀏覽網頁眼睛不舒服嗎？快使用高對比模式 (Chrome 套件)</h1><div><div></div></div></div>\\\n<div>\\\n<div>\\\n<div>\\\n\\\n<a href=\\\"http://www.wfublog.com/search/label/%E9%9B%BB%E8%85%A6-%20Google-Chrome\\\" target=\\\"_blank\\\">Chrome</a>\\\n\\\n\\\n10\\\n\\\n9\\\n\\\n7981\\\nA+\\\n色\\\n\\\n\\\na:link{text-decoration: underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2px dashed #ccc}[style*='990000']:before,[style*=cc0000]:before{content:&quot; 紅字 &quot;;font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:&quot; 綠字 &quot;;font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:&quot; 藍字 &quot;;font-size:70%;font-weight:700;vertical-align:top}\\\n\\\n\\\n\\\n</div>\\\n</div>\\\n</div>\\\n<div>\\\n電腦螢幕的製程越來越進步，開發出成本越來越低、更省電、顏色更鮮艷的零組件，從 CRT → LCD → LED，然而對眼睛的傷害卻是越來越大。原本 LCD 的背光已經不適合眼睛長期直視，但更慘的是，目前市面上只能買到光線更強的 LED 背光螢幕(新品)。<br/><br/>要讓眼睛對抗強光、調適瞳孔的程度比較緩和，除了購買昂貴的特殊過濾光線眼鏡(或是「<a href=\\\"http://mentor14901.blogspot.tw/2014/08/blog-post_25.html\\\" target=\\\"_blank\\\">抗藍光夾式鏡片</a>」)，我們能做的，就是盡量將螢幕上的字體放大(<a href=\\\"http://www.wfublog.com/2014/06/chrome-zoom-text-only.html\\\" target=\\\"_blank\\\">讓 Chrome 只放大縮小文字套件</a>)，以及使用對眼睛負擔最小的「高對比配色」。<br/><br/>由於現在瀏覽器的使用，佔據了電腦操作很大一部份的時間，因此本文先介紹 Chrome 的兩個高對比套件：<b>High Contrast</b> 及 <b>Hacker Vision</b>。<h2>一、高對比的原理</h2>\\\n為何長時間電腦操作者，需要使用高對比的配色，這篇「<a href=\\\"http://jedi.org/blog/archives/006102.html\\\" target=\\\"_blank\\\">配色與易讀性</a>」有非常詳盡的探討。<br/><br/>高對比有兩種主要模式：黑底白字、白底黑字。這篇文章的作者認為「深底淺字」是能讓他長時間作業的配色。而 WFU 接觸到的例子，似乎<b>每個人習慣的模式不同，有人能接受「深底淺字」，但有人不能接受</b>。就像作者也說了，他的觀點與另一位出版人截然相反。<br/><br/>因此，就像每個人的身體構造不盡然相同一般，<b>找出適合自己眼睛的高對比模式，比盲從專家資訊來得重要。</b><br/><br/>在 Chrome 商店裡，找到了兩款功能不一的高對比模式套件，以下將詳述操作心得，讓讀者能參考並找出適合自己使用的套件、或操作方式。<h2>二、High Contrast</h2>\\\n<b>1. 安裝</b><br/><br/>WFU 在 Win8 使用了高對比佈景後，Chrome 自動推薦了這個套件「High Contrast」，其安裝網址如下：<ul><li><a href=\\\"https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=zh-TW\\\" target=\\\"_blank\\\">https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=zh-TW</a></li>\\\n</ul>\\\n<a href=\\\"http://2.bp.blogspot.com/-R874GZgJtXo/U8-e8H1gazI/AAAAAAAAJ3o/xF5KTgkUv6Q/s1600/chrom-high-contrast.jpg\\\" target=\\\"_blank\\\"><div><img src=\\\":/9afc2734d0404341a6f2398c2c7a962a\\\" type=\\\"image/jpeg\\\" data-filename=\\\"chrom-high-contrast.jpg\\\" height=\\\"352\\\" width=\\\"576\\\"/></div></a><br/><br/><br/>\\\n<b>2. 操作</b><br/><br/>安裝後，在 Chrome 右上角會產生如下圖紅框的小圖示，按下後有不少選項：<br/><br/><a href=\\\"http://3.bp.blogspot.com/-fQ89J9KJe2c/U8-e9GZNu6I/AAAAAAAAJ38/-65b_KJDbhw/s1600/high-contrast-1.png\\\" target=\\\"_blank\\\"><div><img src=\\\":/b49723311625498094f9b659dd0eba6c\\\" type=\\\"image/png\\\" data-filename=\\\"high-contrast-1.png\\\" height=\\\"619\\\" width=\\\"424\\\"/></div></a><br/><br/>可隨時按下「Disable」(或使用快速鍵)來停止執行這個套件。<br/><br/>有七種不同的模式可選，可自行測試一下效果，我常用的是──<ul><li><b>Normal：</b>還原為正常顏色</li>\\\n<li><b>Grayscale：</b>灰階效果</li>\\\n<li><b>Inverted Color：</b>色彩反轉，如果原本網頁是淺底深字的話，顏色就會反轉為深底淺字。</li>\\\n</ul>\\\n如果不想每個網頁分別設定模式，那麼只要選擇了任一模式後，按下「Set as default scheme」，以後每個網頁開啟時的預設值就是這個模式。<br/><br/>如果曾為每個網頁分別設定模式，這個套件的優點是，可以分別記憶每個網頁的模式。而如果要取消所有網站的設定值，按下最下方的「Forget site customizations」即可。<br/><br/><br/>\\\n<b>3. 心得</b><br/><br/><a href=\\\"http://2.bp.blogspot.com/-1jpUppzUFd8/U8-e9OFwpgI/AAAAAAAAJ4Y/AlXAJmz9DoM/s1600/high-contrast-2.png\\\" target=\\\"_blank\\\"><div><img src=\\\":/2e858e6d1a444bf09811158693128fdc\\\" type=\\\"image/png\\\" data-filename=\\\"high-contrast-2.png\\\" height=\\\"396\\\" width=\\\"576\\\"/></div></a><br/><br/>雖然 High Contrast 的功能算多，不過缺點不少──<ul><li><b>顏色處理效果不夠好</b>，例如本站 WFU BLOG 的配色運氣似乎不佳，在各種模式下看起來都不太順眼。</li>\\\n<li><b>跟網頁的 js 可能會相衝</b>，例如上圖為 Google 的搜尋頁面，左上方會跑出一塊奇怪的區域；另外本站的浮動導覽列有時也會有異常顯示。</li>\\\n<li>只有三顆半星的評價，Chrome 商店有人留言，希望圖片的顏色能夠不要跟文字一樣變成高對比模式。</li>\\\n</ul><h3>三、Hacker Vision</h3>\\\n<b>1. 安裝</b><br/><br/>在 Chrome 商店另外找到了這個套件「Hacker Vision」，其安裝網址如下：<ul><li><a href=\\\"https://chrome.google.com/webstore/detail/hacker-vision/fommidcneendjonelhhhkmoekeicedej?hl=zh-TW\\\" target=\\\"_blank\\\">https://chrome.google.com/webstore/detail/hacker-vision/fommidcneendjonelhhhkmoekeicedej?hl=zh-TW</a></li>\\\n</ul>\\\n<a href=\\\"http://1.bp.blogspot.com/-ECExjMVbuh8/U8-e8IshjeI/AAAAAAAAJ3k/BMVzft1mAzk/s1600/chrom-hacker-vision.jpg\\\" target=\\\"_blank\\\"><div><img src=\\\":/de053fc6abc04294b3cf7256319b3798\\\" type=\\\"image/jpeg\\\" data-filename=\\\"chrom-hacker-vision.jpg\\\" height=\\\"354\\\" width=\\\"576\\\"/></div></a><br/><br/><br/>\\\n<b>2. 操作</b><br/><br/>安裝後，在 Chrome 右上角會產生如下圖紅框的小圖示，按下後沒有幾個選項：<br/><br/><a href=\\\"http://3.bp.blogspot.com/-UlRsLArfN80/U8-e8MygQ-I/AAAAAAAAJ3s/reS0H1JcHuY/s1600/hacker-vision-1.jpg\\\" target=\\\"_blank\\\"><div><img src=\\\":/56ac931f602b4754b451969941892421\\\" type=\\\"image/jpeg\\\" data-filename=\\\"hacker-vision-1.jpg\\\" height=\\\"454\\\" width=\\\"420\\\"/></div></a><br/><br/>可隨時按下「Pause Hacker vision」來停止高亮度模式。<br/><br/>只有有兩種模式可選──<ul><li><b>Hacker Vision：</b>其實就是 &quot;色彩反轉&quot; 的效果</li>\\\n<li><b>Normal：</b>還原為正常顏色</li>\\\n</ul>\\\n<b>3. 心得</b><br/><br/>雖然 Hacker vision 的選項少，不過效果很好，所以得到四顆半星──<ul><li><b>顏色處理的效果很棒</b>，後面會附上效果圖。</li>\\\n<li><b>跟網頁的 js 不會相衝</b>。</li>\\\n<li><b>圖片的顏色不會進行高亮度處理，保持原本色彩</b>。</li>\\\n</ul>\\\n而其缺點自然是沒什麼可以設定的選項，如「一、高對比的原理」所提，每個人眼睛適合的模式不一樣，Hacker vision 只能顯示一種模式，則註定無法適合所有人使用。<h3>四、特殊密技</h3>\\\n這兩款套件各有各的優點，但各自都有無法彌補的缺點，該怎麼抉擇是一項難題！有辦法可以解決所有缺點，滿足所有需求嗎？<br/><br/>「爭什麼？摻在一起做成撒尿牛丸啊！」沒想到這句話此時能派上用場。以下是 WFU 發現的密技，<b>將「high-contrast」及「hacker-vision」同時安裝在 Chrome 後，發生了奇妙的事</b>──<ul><li>hacker-vision 的選項功能似乎被 high-contrast 的程式覆蓋掉，怎麼選擇都沒有任何作用。</li>\\\n<li>但操作 high-contrast 的選項後，兩者的缺點同時消失，且兩者的優點依然並存</li>\\\n</ul>\\\n以下詳述這些狀況──<br/><br/><br/>\\\n<b>1. 顏色效果更好</b><br/><br/>下圖是原本「high-contrast」選擇 &quot;Grayscale&quot;(灰階模式)後，本站的顏色效果畫面，色彩偏黑不太好看──<br/><br/><a href=\\\"http://4.bp.blogspot.com/-EURGJgRkAUo/U8-e91qR-6I/AAAAAAAAJ4I/0h8kiN-AD_Q/s1600/high-contrast-3.jpg\\\" target=\\\"_blank\\\"><div><img src=\\\":/284eac3659064a818031a40cedc908e4\\\" type=\\\"image/jpeg\\\" data-filename=\\\"high-contrast-3.jpg\\\" height=\\\"424\\\" width=\\\"576\\\"/></div></a><br/><br/><br/>\\\n下圖是兩個套件混合安裝，「high-contrast」選擇 &quot;Grayscale&quot;(灰階模式)後，本站的顏色效果畫面，色彩看起來順眼多了──<br/><br/><a href=\\\"http://3.bp.blogspot.com/-8LaxhbCdIyk/U8-e-KTuAMI/AAAAAAAAJ4M/cf_lN1vqXMA/s1600/mix-1.jpg\\\" target=\\\"_blank\\\"><div><img src=\\\":/dc0d69f3c6ca4500992820690ed3883c\\\" type=\\\"image/jpeg\\\" data-filename=\\\"mix-1.jpg\\\" height=\\\"423\\\" width=\\\"576\\\"/></div></a><br/><br/><br/>\\\n<b>2. JS 相容性提昇</b><br/><br/>前面已經看過「high-contrast」下的 Google 搜尋畫面，左上角有異常區塊──<br/><br/><a href=\\\"http://2.bp.blogspot.com/-1jpUppzUFd8/U8-e9OFwpgI/AAAAAAAAJ4Y/AlXAJmz9DoM/s1600/high-contrast-2.png\\\" target=\\\"_blank\\\"><div><img src=\\\":/04fd36610bea462ea5eda6a7dc2d3d44\\\" type=\\\"image/png\\\" data-filename=\\\"high-contrast-2.png\\\" height=\\\"396\\\" width=\\\"576\\\"/></div></a><br/><br/><br/>\\\n下圖是兩個套件混合安裝後，Google 的搜尋畫面，異常區塊消失了(色調也比較好看了，對吧？)──<br/><br/><a href=\\\"http://3.bp.blogspot.com/-W2bMtD04ADw/U8-e_VfS1GI/AAAAAAAAJ4g/wefPop7wY5s/s1600/mix-2.png\\\" target=\\\"_blank\\\"><div><img src=\\\":/7e313e55e1124ddd96cf2fe738d9876f\\\" type=\\\"image/png\\\" data-filename=\\\"mix-2.png\\\" height=\\\"459\\\" width=\\\"576\\\"/></div></a><br/><br/><br/>\\\n<b>3. 顏色反轉模式</b><br/><br/>前面提過，我覺得「high-contrast」的顏色效果都滿醜的，且圖片的色彩也都會被一起處理(例如變成灰階)。<br/><br/>現在<b>兩個套件混合安裝後，在「high-contrast」選擇 Inverted Color(顏色反轉)模式，就會變成跟「hacker-vision」一模一樣的漂亮顏色，且圖片會恢復為原本的色彩，</b>就像下圖本站的效果──<br/><br/><a href=\\\"http://1.bp.blogspot.com/--AvX6_KD3uQ/U8-e84voH4I/AAAAAAAAJ30/-74iuJHNWYU/s1600/hacker-vision-2.jpg\\\" target=\\\"_blank\\\"><div><img src=\\\":/9581c9decbc445cfa6043e86a52031f9\\\" type=\\\"image/jpeg\\\" data-filename=\\\"hacker-vision-2.jpg\\\" height=\\\"371\\\" width=\\\"576\\\"/></div></a><h3>五、小結</h3>\\\n因此結論呼之欲出，將兩個套件同時安裝，能夠得到最大彈性(可選擇各種模式)、最佳色彩、最佳執行效果(js 不衝突)。以上測試在 Win8 環境、Chrome 最新版本(V36)下正常運作，由於沒有測試其他作業環境，讀者可以嘗試看看自己作業系統的效果。<br/><br/>其實本站當初設計時，為了讓眼睛看了舒服，採用了比較柔和的配色，我自己在閱覽時，覺得採用 &quot;normal&quot; 模式(原始配色)會比其他模式來的舒適。不過這當然是個人觀感，請還是依照讀者本身的眼球意願，來進行各種模式的設定囉！</div>\\\n\\\n\\\n\\\n\\\n\\\n\\\n\\\n</div></div></div><br/></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":8250}]"
metadata_diff: {"new":{"id":"8f4c0320315948a2b169d03d589d3986","parent_id":"061de1401cfc4cfaadf6e74e015970e9","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764345898781,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T16:20:28.241Z
created_time: 2025-11-28T16:20:28.241Z
type_: 13