Firefox浏览器内置“颜色模拟”功能可验证色觉障碍用户视觉效果,支持去饱和、蓝锥单色、Protanopia、Deuteranopia四种预设,启用后实时渲染变换,并联动对比度检查确保WCAG AA合规。
如果您在使用Firefox浏览器进行网页无障碍开发,需要验证页面在不同色觉障碍用户眼中的显示效果,则可以利用内置开发者工具中的“颜色模拟”功能。以下是启用和操作该功能的具体步骤:
一、打开Firefox开发者工具并进入“颜色模拟”面板
Firefox的“颜色模拟”功能集成在开发者工具的“可访问性”检查器中,需先调出开发者工具,再定位到对应模块。该功能无需额外插件,原生支持多种色觉缺陷类型模拟。
1、在目标网页上右键空白处,选择“检查元素”,或按快捷键Ctrl+Shift+I(Windows/Linux)/Cmd+Option+I(macOS)打开开发者工具。
2、点击顶部标签栏中的“可访问性”选项卡(图标为无障碍轮椅符号)。
3、在右侧面板中找到“颜色模拟”区域,点击其右侧的下拉箭头展开模拟类型列表。
二、选择并启用色觉缺陷模拟类型
Firefox提供四种标准色觉障碍预设:去饱和、蓝锥单色、红-绿弱视(Protanopia)、红-绿弱视(Deuteranopia)。启用任一类型后,当前网页渲染将实时应用对应色彩映射变换,反映该类用户感知的视觉效果。
1、从下拉菜单中选择所需模拟类型,例如“Protanopia(红色盲)”。
2、勾选该选项左侧的开关按钮,使模拟立即生效。
3、页面内容会即时重绘,所有颜色按CIE LAB空间转换规则调整,不改变原始CSS值,仅影响渲染输出。