DevTools 中开启色觉模拟需先启用隐藏的“渲染”面板：按 Ctrl+Shift+P 输入 Rendering 启用，再在面板中选择“模拟视力缺陷”模式；该模拟仅为视觉辅助，不可替代对比度验证与真实用户测试。
DevTools 里怎么开色觉模拟
直接用 Microsoft Edge 或 Chrome（Chromium 内核）的 DevTools 就能模拟，不用装插件、不依赖第三方工具。关键不是“有没有”，而是“选对入口+选对模式”。
- 右键网页 →
检查，或按Ctrl+Shift+I（Windows/Linux）/Cmd+Option+I（macOS）打开 DevTools - 点顶部标签栏的
渲染（Rendering）面板 —— 注意：不是“元素”或“无障碍”，也不是“设置”里的选项 - 在右侧下拉菜单中找到
模拟视力缺陷（Simulate vision deficiencies），展开后可选：去饱和度、protanopia（红盲）、deuteranopia（绿盲）、tritanopia（蓝盲）等 - 勾选任一模式，页面会实时变色；取消勾选即恢复 —— 切换是即时生效的，无需刷新
为什么 Chrome DevTools 没看到“渲染”面板
不是你漏点了，是默认被隐藏了。Chromium 系列浏览器（包括新版 Edge 和 Chrome）从 v94 起把 渲染 面板移出了常驻标签，得手动启用。
- 在 DevTools 右上角点
⋯→更多工具→ 勾选渲染 - 或者更快：按
Ctrl+Shift+P（Win/Linux）/Cmd+Shift+P（macOS）呼出命令菜单，输入Rendering，回车启用 - 启用后，
渲染标签才会出现在顶部标签栏；关闭 DevTools 再打开也会保留该状态 - Edge 用户注意：Edge 83+ 默认已内置，但若用的是旧版企业策略禁用了实验性功能，可能仍不显示 —— 此时需确认
edge://flags/#enable-devtools-experiments已启用
模拟结果不准？常见失真原因
模拟本身是算法映射，不是真实生理模型，偏差主要来自 CSS 渲染层叠加和动态样式干扰。
-
opacity或rgba()半透明色块不会被自动合成背景再模拟 —— DevTools 是对最终像素做色觉变换，但前提是它得先算出那个像素的真实颜色；如果背景是 JS 动态插入或有mix-blend-mode，模拟可能滞后或错位 - 使用
filter: brightness()或contrast()的元素，视觉亮度变了，但色觉模拟仍基于原始色值计算，导致感知与模拟不一致 - SVG 图标、
::before/::after伪元素若没设color而靠继承，有时模拟会忽略其渲染上下文，建议显式声明color或fill - 字体抗锯齿、子像素渲染在高分屏上会影响边缘混色，而模拟器无法还原这种硬件级混合 —— 所以 Mac 上看模拟效果，和 Windows 实机测试可能有细微差异
仅靠模拟够不够判断是否可访问
不够。模拟只是辅助观察，不能替代对比度验证和真实用户反馈。
立即学习“前端免费学习笔记（深入）”；
- 色觉模拟只改观感，不改变
color和background-color的实际值 —— 如果文字本身对比度低于4.5:1，红绿色盲用户看不见，全色觉用户也照样看不清 - 模拟无法覆盖所有色觉类型（比如
protanomaly轻度红弱就比protanopia全红盲更常见，但 DevTools 不提供该档位） - 真正关键的还是 WCAG AA 级文本对比度：用 DevTools 的
Computed面板点开文字元素的color和背景色色块，看弹出的Contrast ratio是否 ≥4.5 - 图标类非文字内容（如带
aria-label但未设aria-hidden="true"的 SVG）也必须满足对比度 —— 模拟器不会提醒你这点，但屏幕阅读器和色觉障碍用户都会受影响
#333 和 rgba(255,255,255,0.8) 去 WebAIM 对比度工具里一贴，大概率就亮红灯。 
