HTML怎么做色觉模拟_HTML DevTools模拟色觉障碍【常见问题】-html教程-PHP中文网

devtools 中开启色觉模拟需先启用隐藏的“渲染”面板：按 ctrl+shift+p 输入 rendering 启用，再在面板中选择“模拟视力缺陷”模式；该模拟仅为视觉辅助，不可替代对比度验证与真实用户测试。

html怎么做色觉模拟_html devtools模拟色觉障碍【常见问题】

直接用 Microsoft Edge 或 Chrome（Chromium 内核）的 DevTools 就能模拟，不用装插件、不依赖第三方工具。关键不是“有没有”，而是“选对入口+选对模式”。

右键网页 → 检查，或按 Ctrl+Shift+I（Windows/Linux）/Cmd+Option+I（macOS）打开 DevTools
点顶部标签栏的 渲染（Rendering）面板 —— 注意：不是“元素”或“无障碍”，也不是“设置”里的选项
在右侧下拉菜单中找到 模拟视力缺陷（Simulate vision deficiencies），展开后可选：去饱和度、protanopia（红盲）、deuteranopia（绿盲）、tritanopia（蓝盲）等
勾选任一模式，页面会实时变色；取消勾选即恢复 —— 切换是即时生效的，无需刷新

不是你漏点了，是默认被隐藏了。Chromium 系列浏览器（包括新版 Edge 和 Chrome）从 v94 起把 渲染 面板移出了常驻标签，得手动启用。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

在 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）也必须满足对比度 —— 模拟器不会提醒你这点，但屏幕阅读器和色觉障碍用户都会受影响