共用方式為


確認頁面可供色盲人士使用

若要檢查網頁是否可供色盲人士使用,請在 [ 譯] 工具中,使用 [模擬視覺缺陷 ] 下拉式清單。

在輔助功能測試示範網頁上,不同的待用狀態會使用色彩作為唯一的區別方式:

  • 綠色表示已收到大量款項。
  • 黃色表示已收到中量的款項。
  • 紅色表示已收到少量的款項。

但您無法預期所有使用者都能如預期般體驗這些色彩。 藉由使用轉譯工具的模擬視覺缺陷功能,您可以藉由模擬具有不同視覺的人如何察覺您的設計,找出這項設計不夠好。

若要檢查網頁是否可供色盲人士使用:

  1. 在新的視窗或索引標籤中開啟網頁,例如 輔助功能測試示範網頁

  2. 以滑鼠右鍵按一下網頁中的任何位置,然後選取 [ 檢查]。 或者,按 F12。 DevTools 會在網頁旁邊開啟。 根據預設, [快速檢視] 面板會在 DevTools 底部開啟。

  3. 如果 [ 快速檢視] 面板尚未開啟,請按 Esc 以開啟 [ 快速檢視 ] 面板 (當焦點在 DevTools) 時。 在 [ 快速檢視] 面板中,按一下 [ 其他工具 (+) ] 按鈕,然後選取 [ 轉譯 ] 工具。

  4. 向下捲動至 [ 模擬視覺缺陷 ] 下拉式清單,然後選 取 [Protanopia (沒有紅色) Protanopia 會降低對紅光的敏感度,因此難以區分綠色、紅色和黃色:

    將檔顯示為有 protanopia 的人會看到它

  5. 若要移除模擬,請在 [ 模擬視覺缺陷 ] 下拉式清單中,選取 [ 無模擬]

另請參閱

  • 模擬視覺缺陷 - 定義 [ 模擬視覺缺陷 ] 下拉式清單中的專案,包括 Protanopia、Deuteranopia、Tritanopia 和 Achromatopsia。