# WCAG 高对比色彩方案以适应低视力 **URL:** \ **Category:** Announcements\ **Tags:** accessibility, wcag-palettes\ **Created:** [2020年十月30日 21:04 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795 "2020-10-30T21:04:41Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2020年十月30日 21:04 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/1 "2020-10-30T21:04:41Z")
感谢 @pmusaraj 和我的努力，Discourse 现在允许用户在设置向导中选择一个高对比度配色方案。 这些配色方案优先考虑文本对比度，旨在符合 [Web 内容无障碍指南中的颜色对比度要求](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)（AA 级）。在幕后，这些并非普通配色方案；它们还会自动包含额外的 CSS。 同时提供浅色和深色版本（它们是列表中的最后两个选项）。现有站点可以通过访问 `community.yoursite.com/wizard/steps/color` 来使用这些颜色，或者在通过 `admin > customize > colors` 创建新配色方案时将其选为基本配色方案。 ![Screen Shot 2020-10-30 at 2.39.07 PM](https://global.discourse-cdn.com/meta/original/3X/a/c/acdf7d632bb444d81c648eacb3815da7d1dc47cd.jpeg) 创建后，这些配色方案将列在 `admin > customize > colors` 下。如果您未将它们用作站点的默认颜色，还可以允许用户选择这些配色方案。 ![Screen Shot 2020-10-30 at 4.16.20 PM](https://global.discourse-cdn.com/meta/original/3X/4/6/46c11df78c125214a46d7edb03c32c8951c01b41.png) 当设置为可由用户选择时，个人可以在其首选项的“界面”部分选择自己的配色方案（`community.yoursite.com/my/preferences/interface`）。 ![Screen Shot 2020-10-30 at 4.49.52 PM](https://global.discourse-cdn.com/meta/original/3X/a/4/a40cb15152e7174750d0cad84b2fbeaa8dc0506b.png) 如果您在使用这些配色方案的对比度时遇到任何问题，请告诉我们，以便我们继续符合 WCAG 设定的标准！ ---
**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ **Post date:** [2020年十月30日 21:12 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/2 "2020-10-30T21:12:21Z")
如果 Discourse 的默认配色方案符合 WCAG 标准，那该多好。您能评论一下为何目前并非如此吗？ ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2020年十月30日 21:28 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/3 "2020-10-30T21:28:00Z")
由于 Discourse 最初并非为高对比度颜色而设计，我们可能需要在颜色之外进行更重大的调整，以适应这些差异。将高对比度颜色作为第一步推出，能让这些更易于访问的颜色今天就能投入使用。 一个简单的例子是我们如何区分已读和未读主题。默认情况下，我们在阅读主题后会降低其对比度： ![Screen Shot 2020-10-30 at 5.24.00 PM](https://global.discourse-cdn.com/meta/original/3X/2/7/27d89bf54733c85d8ac872653713567345bcf64e.png) 为了符合 WCAG 标准，我们需要提高已读标题的对比度，结果导致已读和未读标题之间的对比度差异不大……因此，我认为从长远来看，我们应该考虑采用除对比度之外的其他方式来区分两者。 ![Screen Shot 2020-10-30 at 5.17.24 PM](https://global.discourse-cdn.com/meta/original/3X/f/e/fea7add7db49ade6dd1181efa98df744ce12c302.png) ---
**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ **Post date:** [2020年十月30日 21:56 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/4 "2020-10-30T21:56:20Z")
明白了。我只是想鼓励团队继续推进这项工作。 ---
**Author:** ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)\ **Post date:** [2020年十月30日 22:43 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/5 "2020-10-30T22:43:52Z")
这太棒了，非常感谢。代表一些对此抱怨过的视障用户，我们对此深表感激。我已立即启用了此功能。 ---
**Author:** ![EricGT](https://avatars.discourse-cdn.com/v4/letter/e/f1d935/32.png) [@EricGT](https://meta.discourse.org/u/EricGT)\ **Post date:** [2020年十月31日 09:25 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/6 "2020-10-31T09:25:20Z")
在阅读了第一篇帖子后，我原本以为需要在向导中选择新颜色才能将其添加到列表中。运行向导并到达“颜色”页面时，我试图找到一种方法来选择所有颜色，因为我想将新颜色添加到列表中。看来我的理解有误。根据我在“颜色”页面上看到的颜色选择方式，似乎只能选择一个配色方案。这让我感到困惑。 1. 在“颜色”页面上选择一个方案会执行什么操作？这是否为所有人设置默认值？ 2. 为什么向导中只允许选择一个配色方案？答案可能与问题 1 相同。 由于我是在跟随第一篇帖子的操作过程中写下这些内容的，因此我暂时保持“颜色”页面的设置不变。 接下来转到 `admin > customize > colors`。经过一些尝试后发现： 1. 选择 `新建` 2. 对于 `基础调色板`，打开下拉菜单，现在其中包含了 `WCAG Light` 和 `WCAG Dark`。 这样就提供了一种选择项目的方法。 于是，我选择了 `WCAG Light`，随后弹出一个对话框，要求我为颜色调色板命名并选择颜色。按照示例，我输入名称 `WCAG Light`，选择了 `用户可以选配色方案`，然后点击 `保存`。 接着访问 `community.yoursite.com/my/preferences/interface`，但我没有找到 `配色方案` 部分。 另外，我们的网站启用了 `汉堡菜单主题选择器`，我原本以为这些选项会自动显示在那里，但看来我需要创建一个新的 `基础主题`（Theme）才能使用它们。 这并非抱怨，仅是一位首次阅读该帖子并尝试操作的用户的反馈。🙂 ---
**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\ **Post date:** [2020年十月31日 16:36 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/7 "2020-10-31T16:36:02Z")
> [@EricGT](#): > > 所以我选择了 `WCAG Light`，然后弹出一个对话框，让我命名颜色调色板并选择颜色。如示例所示，我输入了名称 `WCAG Light`，选择了“用户可选择配色方案”，然后点击了“保存”。 > > 接着前往 `community.yoursite.com/my/preferences/interface`，但我没有找到“配色方案”部分。 嗯，这应该能生效的。可能是您需要刷新一下界面偏好设置页面。 ---
**Author:** ![EricGT](https://avatars.discourse-cdn.com/v4/letter/e/f1d935/32.png) [@EricGT](https://meta.discourse.org/u/EricGT)\ **Post date:** [2020年十一月1日 09:44 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/8 "2020-11-01T09:44:58Z")
> [@pmusaraj](#): > > 嗯，这本来应该能行。也许你需要刷新一下界面偏好设置页面。 我看到的就是这样。甚至刷新了 HTML 页面，也没有任何变化。 注意：该网站由 Discourse 托管，不知这是否相关——[https://swi-prolog.discourse.group/](https://swi-prolog.discourse.group/) ![image](https://global.discourse-cdn.com/meta/original/3X/d/d/ddc5530ba60caccff70627d9a8f31e312401456d.png) ---
**Author:** ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)\ **Post date:** [2020年十一月1日 12:30 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/9 "2020-11-01T12:30:25Z")
我查看了您的网站，在两种方案中均未看到“用户可选择配色方案”已启用。您是否忘记勾选复选框以保存选择？ ![image](https://global.discourse-cdn.com/meta/original/3X/4/b/4bdf971a8b4f886e8e9b44b6b4d06a78d673d50d.png) ---
**Author:** ![EricGT](https://avatars.discourse-cdn.com/v4/letter/e/f1d935/32.png) [@EricGT](https://meta.discourse.org/u/EricGT)\ **Post date:** [2020年十一月1日 17:11 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/14 "2020-11-01T17:11:05Z")
哦，这太有趣了。不是你的问题，而是我做的操作。谢谢你的查看和回复。 从 `Admin` \> `Settings` \> `Customize` \> `Colors` 在左侧面板中查看 `WCAG Light` 和 `WCAG Dark`。 点击 `WCAG Light` 会显示 ![image](https://global.discourse-cdn.com/meta/original/3X/8/a/8aaef13841a412afeddac4afc47b685c7a8961aa.png) 然后我启用了 `Color scheme can be selected by users` ![image](https://global.discourse-cdn.com/meta/original/3X/1/d/1d0b226542f1652847cde41545dda6f8ce1ea286.png) 我第一次没有注意到的是新增的蓝色复选框 点击新增的蓝色复选框后，显示变为 ![image](https://global.discourse-cdn.com/meta/original/3X/e/d/ed4a7cb313bd75470fd7e10a542109b1ea4b4836.png) 然后访问 [SWI-Prolog - Users and developers of SWI-Prolog, an implementation of the Prolog programming language](https://swi-prolog.discourse.group/my/preferences/interface) 现在会显示 ![image](https://global.discourse-cdn.com/meta/original/3X/5/3/53d4874653da465a35093069615187289151cdcc.png) 🙂 * * * 在添加了一些用户可以使用的更多颜色后，界面选项发生了变化，让我可以选择常规模式和深色模式 ![image](https://global.discourse-cdn.com/meta/original/3X/e/e/ee47343c0df77e7f606e63589851306b3dcbd9ab.png) ---
**Author:** ![mk0r](https://avatars.discourse-cdn.com/v4/letter/m/4da419/32.png) [@mk0r](https://meta.discourse.org/u/mk0r)\ **Post date:** [2020年十一月6日 22:46 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/15 "2020-11-06T22:46:33Z")
> [@awesomerobot](#): > > 在幕后，这些并非普通的调色板；它们还会自动包含额外的 CSS。 你能详细说明一下这意味着什么吗？我正准备搭建我的第一个论坛，想要自定义配色方案，同时也希望支持根据用户系统偏好自动切换深色模式。 我是否应该以这些新方案为基础来自定义颜色？ 考虑到近期关于配色方案构建方式的变更（以支持深色模式，相关讨论见最近的帖子）以及这些新的无障碍方案，目前创建自定义配色方案的步骤是什么？ 谢谢！ ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2020年十一月6日 23:06 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/16 "2020-11-06T23:06:43Z")
> [@mk0r](#): > > 你能详细说明一下这是什么意思吗？ 因此，当选择这些 WCAG 调色板时，会加载一些额外的 CSS（[在此处找到](https://github.com/discourse/discourse/blob/5763309953c1c40bc2ecb05f3e73d502f1ea2c61/app/assets/stylesheets/wcag.scss#L1)），以更改各种元素的颜色（通常是为了使用比我们默认使用的颜色变量具有更高对比度的颜色变量）。我认为该 CSS 是根据调色板的名称加载的…… ~~因此，如果你想修改这些调色板并保留自定义 CSS 带来的一些对比度改进，我想你只需不更改名称即可（对吗 @pmusaraj？）。~~ 或者，你也可以从上面的链接复制 CSS 并在你自己的主题中使用它（尽管你将无法获得我们进行的更新）。 ---
**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\ **Post date:** [2020年十一月7日 03:12 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/17 "2020-11-07T03:12:02Z")
> [@awesomerobot](#): > > 我认为 CSS 是根据配色方案的名称加载的…… 不，如果当前方案是基于两种基础 WCAG 方案之一派生而来的，则会包含特定于 WCAG 的 CSS。因此，你可以随意命名新方案，但如果它是从基础 WCAG 方案创建的，它将包含额外的 CSS。 ---
**Author:** ![Nina\_11](https://avatars.discourse-cdn.com/v4/letter/n/3ab097/32.png) [@Nina\_11](https://meta.discourse.org/u/Nina_11)\ **Post date:** [2021年一月27日 23:24 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/18 "2021-01-27T23:24:13Z")
很高兴看到这项新功能！想了解一下，Discourse 目前是否已完全符合 WCAG 指南，还是仍有改进空间？ ---
**Author:** ![HAWK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hawk/32/86627_2.png) [@HAWK](https://meta.discourse.org/u/HAWK)\ **Post date:** [2021年一月27日 23:25 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/19 "2021-01-27T23:25:42Z")
还有一些工作要做，但并不多。我们已经完成了99%，目前正在积极与无障碍顾问合作，填补最后的空白。 ---
**Author:** ![Nina\_11](https://avatars.discourse-cdn.com/v4/letter/n/3ab097/32.png) [@Nina\_11](https://meta.discourse.org/u/Nina_11)\ **Post date:** [2021年一月27日 23:28 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/20 "2021-01-27T23:28:59Z")
听到所有用户都取得这样的进展真是太好了。你们正在朝着哪些 WCAG 指南努力？是 WCAG 3.0 吗？ ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2021年一月27日 23:33 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/21 "2021-01-27T23:33:06Z")
我们正在努力符合 WCAG 2.0 标准，而 WCAG 3.0 目前仍处于草案阶段，详见 [https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/。](https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/%E3%80%82) ---
**Author:** ![NJO](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/njo/32/207623_2.png) [@NJO](https://meta.discourse.org/u/NJO)\ **Post date:** [2021年一月28日 19:43 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/22 "2021-01-28T19:43:24Z")
在跟进这个主题时，我很高兴得知支持 WCAG 2.0。我可能错过了，但没有看到关于字幕的提及。Discourse 是否支持视频资源的字幕？Discourse 是否有发布带字幕视频的机制？ ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2021年一月28日 19:45 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/23 "2021-01-28T19:45:54Z")
您可以使用 HTML5 video 标签手动添加字幕，此外还有一个主题组件为其提供简单的用户界面。 > [@Insert Video](https://meta.discourse.org/t/insert-video-component/147651): > > discourse2Summary Insert Video adds a composer button that simplifies adding videos with subtitles (VTT format), a poster image and multiple video sources to a Discourse post.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/insert-video)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-insert-video](https://github.com/discourse/discourse-insert-video)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Clicking the button triggers a mo… ---
**Author:** ![khenmu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/khenmu/32/108976_2.png) [@khenmu](https://meta.discourse.org/u/khenmu)\ **Post date:** [2022年九月23日 01:54 UTC](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795/24 "2022-09-23T01:54:34Z")
非常感谢 WCAG Dark！我太喜欢它了！！ 其实我并没有（据我所知）真正需要它——我只是觉得它看起来太棒了。❤ [下一頁](https://meta.discourse.org/t/wcag-high-contrast-color-palettes-for-low-vision/168795.md?page=2)