有助於色盲使用者的網頁設計﹍展示頁面

安裝程式碼請參考這篇「[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例」。

這個按鈕可放在網頁任何地方，讓色盲使用者能自行將版面切換成另一套 CSS，提升這個族群的閱讀體驗。

可操作下面這顆按鈕看效果，重整頁面後，仍會記住上一次設定的文字大小：

色

****範例文字****

友善的網頁設計要點

這篇「為色盲用戶提升網頁可用性的實用設計技巧」整理了不少值得參考的設計要點，將有助於色盲使用者閱覽網頁：

1. 圖片中使用文字時，需要增加對比，讓文字更容易閱讀，例如文字使用陰影。

2. 頁面標示顏色時，最好加註顏色的名稱，因為色盲者可能無法辨識。

3. 有圖片的產品描述，最好加上顏色標示。

4. 網頁的連結最好加上底線 → 這一點很重要，我們的網頁常常為了美觀，將連結的底線去除。雖然我們可以看出連結的文字顏色與一般文字不同，但無論使用何種顏色，都可能讓一部份的色盲、色弱者分辨不出來，因此最好的方法，就是為連結加上底線。

5. 網頁配色：這一點 WFU 不是專家，請直接參考原文的來瞭解如何做。

6. 某些用顏色來強調的文字或說明，必須設計出一套機制，讓色盲使用者能理解。

安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

安裝方式以 Blogger 為例，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--調整文字大小-->
<script>
//<![CDATA[
$(function() {
var postBody = ".post-body", // 文章區塊
minSize = 16, // 最小文字 px 值
maxSize = 32, // 最大文字 px 值
addSize = 4, // 每次點擊按鈕增加的尺寸 px 值
size = parseInt(localStorage.postFontSize) || minSize;
$(postBody).css("font-size", (localStorage.postFontSize || minSize) + "px");
$("#enlarge_font_size").click(function() {
size += addSize;
size = size > maxSize ? minSize : size;
localStorage.postFontSize = size;
$(postBody).css("font-size", size + "px");
});
});
//]]>
</script>
<!-- Designed by WFU BLOG-->
****************