除非用户想要或需要更高的对比度,否则如何确保网站的 colored颜色 主题提供符合WCAG 2 minimum contrast requirements的高对比度替代方案,同时更喜欢粉彩、低对比度主题?

我try 使用prefers-contrast media query定义一个对比度较高的回退主题,并提供一个对比度较低的版本,除非用户需要高对比度,但下面的示例(也作为codepen here,由于前景色的对比度较低,无法通过axe Chrome扩展的可访问性审核:#eeeeee,背景色:#f2660.)

定义适当的回退需要什么CSS代码?

p {
  background-color: #f26600;
  color: #eeeeee;
}

@media (prefers-contrast: more) {
  p {
    background-color: #aa3300;
    color: #ffffff;
  }
}

我还try 反转代码片段中的逻辑,使其与实际默认值形成高度对比,而不是相反:codepen.io/openmindculture/pen/eYVPgoo.这将在没有 colored颜色 对比度警告的情况下进行验证,但这是否会显示粉彩版本?我在哪里可以说我更喜欢较少的对比度,我怎么知道?

推荐答案

这是一个非常有趣的问题.

关于提供替代对比度版本

Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast实际上是sufficient technique to meet WCAG’s contrast criteria.

但他们确实需要以下内容:

  1. 原始页面上的链接或控件本身必须满足所需SC的对比度要求.(如果用户看不到控件,则可能无法使用它转到新页面.)
  2. 新页面必须包含与原始页面相同的所有信息和功能.
  3. 新页面必须符合所有SC,以达到所需的一致性级别.(即,新页面不能仅具有所需的对比度,否则不符合要求).

由于您只想切换样式,因此很可能会遇到2和3.您只需要添加一个切换样式的按钮.

您可以有第二个样式表(.css文件),用于定义对比度版本.然后可以执行以下操作:

<link href="contrast.css" rel="alternate stylesheet" type="text/css" title="Contrast Styles">

这将允许支持这些(Firefox)的浏览器向用户提供样式切换.参见Alternative style sheets

然后添加一个按钮,通过JavaScript激活该样式表,并添加一个媒体查询,如果@media (prefers-contrast: more),则将其导入.

当替代样式表处于活动状态时,您的审计工具是否会让您通过这一点尚不确定.最后,对于法律合规性,手动审核始终是必要的,您应该通过1.4.3.

希望用户如何表示其对比度偏好

因为字体大小控制在浏览器中已经存在很长时间了,所以在过go 的日子里,是否应该将其作为网站的一部分进行了很大的讨论.WCAG从未要求过它(afaik),但对该网站进行控制的理由是,许多用户对自己的浏览器了解不够.

同样的参数也适用于对比度模式(很多人可能不知道操作系统的对比度设置,或者没有访问权限),但这次WCAG实际上以任何方式都需要一个控件.

有没有办法让浏览器或操作系统根据日光设置、暗/光主题、环境光传感器等调整对比度首选项?

根据Android中的日光设置,有几种方法可以使用黑暗主题设置,可能还有一些应用程序允许在环境光下切换basede.

我不知道有什么功能可以基于相同的设置对比度模式,即使是在Windows 11 which improved their accessibility contrast themes a lot.

这可能是有道理的,因为这更像是一种说明,用户需要更高的对比度,无论是白天还是夜晚,光还是暗的主题.

Css相关问答推荐

当optgroup元素不包含任何未使用CSS禁用的选项元素时,如何隐藏它

在css网格中用一个锚标签(顶部/底部边距)包装图像?

如何在Delphi的TMS Web Core上向窗体添加背景图像

解释 "document.styleSheets[0].cssRules[0].style;"

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • 是否有一个 CSS 可以根据字符的高度 for each 字符呈现可变高度?

    将 tailwincss 转换为普通 CSS?

    将框架放入 bootstrap 模式的正确方法是什么?

    如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

    网格区域即使使用 fr 也不会减小其宽度

    CSS 常量()用于什么?

    在同一旋转中以度数变换旋转

    我怎样才能在某些区域制作一个单独的文本行,而在其他区域制作一个实心填充?

    svg 背景图像位置始终在 Internet Explorer 中居中,尽管 background-position: left center;

    如何更改 CSS:JavaScript 中的根 colored颜色 变量

    调用转发到 JSP 的 Servlet 时,浏览器无法访问/查找相关资源,如 CSS、图像和链接

    如果容器 div 较小,如何将子 div 扩展到 100% 屏幕宽度?

    如何更改 HTML 输入标签的字体和字体大小?

    堆叠半透明盒子的 colored颜色 取决于订单?

    CSS:怎么说 .class:last-of-type [类,不是元素!]