可访问性对比度颜色网格小工具

# 可访问对比度颜色网格工具 来源：https://beeps.website/blog/2026-07-09-accessible-contrast-ratio-colour-grid-thing/ 有时你正在做一个需要用到大量颜色的项目。 也许这些颜色对你来说很陌生，因为最近的品牌升级改变了设计系统的基础；或者你只是在做一个个人项目的重新设计。 在理想世界中（我们都想要一个理想世界，*对吧？*），你最终使用的颜色组合应该是可访问的。你甚至可能被法律要求确保它们可访问，通常需要符合类似《网页内容无障碍指南》（WCAG）(https://www.w3.org/TR/WCAG22/) 这样的规范，该指南对用户界面元素、文本和状态变化设定了最低对比度。 当你需要一个按钮与页面背景的对比度至少为 3:1，并且按钮背景与文本的对比度至少为 4.5:1 时，用传统的对比度工具(https://webaim.org/resources/contrastchecker/) 一个一个地比较颜色组合简直是麻烦。为什么不一次性搞定所有组合呢？ 所以，是的，我做了这个工具。 网页截图。左侧是用户输入的颜色十六进制代码列表和一个评分指南。右侧是一个二维网格，展示了所有提供的颜色，显示颜色A文本在颜色B背景上的色块，以及该组合在WCAG中的评分等级。 当当当\链接到这个网格。 ## 为什么我要做这个 对比度颜色网格工具 (https://colors.beeps.gay/)（我从没说过我擅长起名）是一个业余项目，始于2024年，当时我第一次参与 GOV.UK 品牌刷新项目 (https://beeps.website/blog/2025-06-25-the-not-quite-new-govuk-brand/)。 第一个版本仍然可以在我的 GitHub 上找到 (https://github.com/querkmachine/govuk-frontend-apca-checker)。 这个最初只是一个一次性参考工具，所以是用 Eleventy (https://11ty.dev/) 快速原型搭建的，所有颜色都硬编码在数据文件中。 但将其变成一个通用工具看起来是个好主意，所以我在今年二月开始用 Express (https://expressjs.com/) 编写。虽然有一段时间没用 Express 了，但重新上手非常简单。我太爱 JavaScript 生态系统了 (MILJSE)。 然后我搁置了一段时间，最近一周又做了一些重新设计和功能调整，现在我认为它已经**完成**了。至少在最小可行产品意义上算是完成了。 所以，呃，不妨去看看。这里有一个包含一大堆颜色的示例 (https://colors.beeps.gay/?hash=MEIwQzBDLDQ4NDk0OSw4NTg2ODYsQ0VDRUNFLEYzRjNGMyxGRkZGRkYsMUQ3MEI4LDM3QTNGRiw1Njk0Q0EsOEVCOERDLEQyRTJGMSxGNEY4RkIsMTY1NDhBLDBGMzg1QywwNjE2MjUsMTFFMEYxLDExODc1QSw0REE1ODMsODhDM0FELENGRTdERSxGM0Y5RjcsMEQ2NTQ0LDA5NDQyRCw2NkYzOUUsMTU4MTg3LDUwQTFBNSw4QUMwQzMsRDBFNkU3LEYzRjlGOSwxMDYxNjUsMEI0MTQ0LDAwRkZFMCw1NDMxOUYsN0Y2NUI3LEFBOThDRixEREQ2RUMsRjZGNUZBLDNGMjU3NywyQTE5NTAsQkE0QUZGLENBMzU3QyxENzY4OUQsRTU5QUJFLEY0RDdFNSxGQ0Y1RjgsOTgyODVELDY1MUIzRSxGRjUyRUUsQ0EzNTM1LEQ3Njg2OCxFNTlBOUEsRjREN0Q3LEZDRjVGNSw5ODI4MjgsNjUxQjFCLEZGNUU1RSxGNDc3MzgsRjc5OTZBLEZBQkI5QyxGREU0RDcsRkVGOEY1LEI3NTkyQSw3QTNDMUMsRkZBRjRBLEZGREQwMCxGRkU2NDAsRkZFRTgwLEZGRjhDQyxGRkZERjIsQkZBNjAwLDgwNkYwMCxGQ0ZGNTIsOTk3MDRBLEIzOTQ3NyxDQ0I4QTUsRkFGOEY2)，以展示它的实用性。 对比度颜色网格 (https://colors.beeps.gay/) ## 预设常见问题（PAQs） ### 嘿，你原来的工具用的是APCA！为什么这个不用？ APCA（或与其反对者称它为 可感知对比度算法 (https://git.apcacontrast.com/documentation/APCAeasyIntro.html)）无疑是一个比WCGA算法更好的对比度算法。 但它不是任何WCAG规范的一部分，因此也不是许多无障碍立法要求使用的算法。 它的评分计算方式也更复杂，需要考虑到使用的字体大小和度量等因素，这使得它很难像本工具这样做到一刀切式的通用化。 我可能会在未来某个时候添加APCA支持，但不是现在。 ### URL里那些长得要命的哈希字符串是怎么回事？ 哈希字符串包含了所有颜色，但编码成了base64。我觉得这样比列出所有实际颜色十六进制代码更节省空间。可能我错了。哦。 （我隐约打算在将来给哈希添加更多元数据，这时用这种编码方式可能更合理，但目前还没有。） ### 我可以在URL中直接传递十六进制代码吗？ 可以！使用 `?colors=` 代替 `?hash=`，后面跟上以逗号分隔的十六进制代码（去掉 `#` 符号）。效果是一样的。 该工具的隐私实践与这个网站相同 (https://beeps.website/privacy/)。没有 Cookie，没有分析工具，除了请求的URL之外不会记录任何内容，而URL会在一周后删除。 ### *关于安全性的某些含糊其辞* 确实，我不是资深的安全专家，而这个网站实际上接受用户输入并在页面上渲染内容，不像这个博客那样只是静态页面的垃圾。 如果你发现安全问题，请告诉我 (https://beeps.website/.well-known/security.txt)。 ### 这是开源的吗？ 当然是，你这个傻鹅 (https://github.com/querkmachine/accessibility-color-grid)。许可证也很宽松。你想怎么用就怎么用。 ### *极其英式的嗓音* 为什么是“color”而不是“colour”？ HTML 和 CSS 使用美式拼写。如果你不喜欢，去怪蒂姆·伯纳斯-李吧。