北京
开源Matrix协作客户端Element Web最近完成了一项特殊的“捉虫”任务。在DEV社区举办的Summer Bug Smash活动中，一位开发者修复了Element Web高对比度主题下Spotlight对话框文字几乎不可读的问题，并为此加上了自动化回归测试，确保类似问题不再悄悄复发。
问题：浅色文字配浅色背景
Element Web是一个基于TypeScript的大型monorepo项目，为Matrix这一开放去中心化通信协议提供Web端体验，支持实时消息、房间、私聊、搜索、媒体、通话、集成、审核及无障碍功能等。它不仅是独立的Web应用，还作为Element Desktop的基础——同一套Web应用运行在Electron环境中。这意味着看似很小的前端问题，可能产生更大的影响面。
本次修复的第一个问题出现在Element使用高对比度主题时的Spotlight对话框。当某个Spotlight结果被悬停或键盘选中时，文字可能以浅色渲染在浅色背景上——结果虽然技术上存在，但实际上无法阅读。这直接违背了高对比度无障碍模式的设计初衷。
根因：多个Spotlight状态误用$background作为文字颜色
问题根源在高对比度主题样式中：多个Spotlight状态使用$background作为文字颜色，而对应的悬停背景同样是浅色。浅色文字加浅色背景，等于不可读的界面。受影响的范围包括多个Spotlight表面。
修复方式是将受影响的状态改为使用$primary-content，在高对比度浅色背景上提供合适的深色前景。修复提交在PR #34465中，已合并进Element Web的develop分支。
验证：不只是“看起来对了”
修复者没有止步于“在我的机器上看起来正常”。为了让回归不可能悄悄回来，他添加了自动化无障碍测试，直接验证真实的WCAG对比度。测试确认受影响元素达到至少4.5:1的对比度——这是WCAG AA对普通文字的要求。
更重要的是，测试在修复被回退时会失败。修复后的实现通过了对比度要求，而原始实现的对比度约为1.38:1。这比单纯检查两个颜色值是否不同要强得多。
PR #34465在评审后由Element Web维护者合并。这次修复不仅解决了眼前的可读性问题，还为项目建立了一道自动防线，让高对比度模式下的可读性有了可量化的保障。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
