a11y: `opacity: 0.9` on h3 to h6 pushes links in headings below WCAG AA contrast
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 83/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- css, html, sass
调研方向
从 src/resources/formats/html/bootstrap/_bootstrap-rules.scss 中报告所链接的标题不透明度规则处开始。渲染提供的 QMD 示例，并运行 axe-core 检查 h4、h5 和 h6 中链接的对比度。当这些链接保持主题链接颜色的对比度，且 axe-core 不再报告 color-contrast 违规时，即为完成。
由索引模型根据 Issue 内容生成。
描述
I have:
- searched the issue tracker for similar issues
- installed the latest version of Quarto CLI
- formatted my issue following the Bug Reports guide
Bug description
The HTML stylesheet sets opacity: 0.9 on h3, h4, h5 and h6.
Opacity blends every descendant toward the page background, so a link colour that passes on its own fails inside a heading.
The built-in link colours are close to the 4.5:1 line, so there is no margin for the fade.
axe-core color-contrast (serious, WCAG 2.2 SC 1.4.3) flags a link inside h4, h5 and h6:
| Theme | Link colour after the fade | Background | Ratio |
|---|---|---|---|
| default | #257dfd |
#ffffff |
3.86:1 |
cosmo |
#3d71e6 |
#ffffff |
4.46:1 |
A link inside h3 is not flagged, because h3 is large text and only needs 3:1.
Plain heading text is not flagged either.
#14679 reports the same mechanism for the appendix with opacity: 0.9.
This is a separate rule in a different place, so a fix for the appendix does not cover headings.
Steps to reproduce
---
title: "Heading link contrast test"
---
## Two
### Three [with a link](https://example.org)
#### Four [with a link](https://example.org)
##### Five [with a link](https://example.org)
###### Six [with a link](https://example.org)
Render it, then run axe-core on the page, for example with axe: output: document or with the axe.min.js that ships with Quarto.
Actual behavior
axe-core reports color-contrast on the links in the h4, h5 and h6 headings, with the ratios in the table above.
Expected behavior
Links inside headings keep the contrast of the theme's link colour, so they meet 4.5:1 whenever the link colour does.
Your environment
- IDE: none, terminal only
- OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.10.0: OK
Dart Sass version 1.101.0: OK
Deno version 2.7.14: OK
Typst version 0.15.1: OK
[✓] Checking Quarto installation......OK
Version: 99.9.9
commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
- 主要语言
- JavaScript
- 星标
- 6.1k
- 派生
- 476
- 平均合并
- 16 小时 42 分钟
- 30 天内合并 PR
- 115
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
quarto-dev/quarto-cli 的其他 Issue
-
Website announcement dismiss control cannot be reached or used with a keyboard可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭accessibility bug websites
难度 1/5 1-3 小时 新手友好度 88/100
quarto-dev/quarto-cli#15235 ·
维护者通常 1 天内回复
-
quarto.json.decode does not raise on invalid JSON, so pcall cannot catch it可能已有人在做 @sogav21 于 1 天前认领。 未关闭bug lua
难度 2/5 1-3 小时 新手友好度 84/100
quarto-dev/quarto-cli#15226 ·
维护者通常 1 天内回复
-
arrow-dark gives region markers a light band that fails contrast可能已有人在做 @vav7 于 1 天前认领。 未关闭accessibility bug themes
难度 1/5 1 小时以内 新手友好度 88/100
quarto-dev/quarto-cli#15222 ·
维护者通常 1 天内回复
-
bug code-annotation
难度 2/5 1-3 小时 新手友好度 76/100
quarto-dev/quarto-cli#15215 ·
维护者通常 1 天内回复
-
accessibility bug website-navigation
难度 2/5 1-3 小时 新手友好度 83/100
quarto-dev/quarto-cli#15190 ·
维护者通常 1 天内回复
查看 quarto-dev/quarto-cli 的全部 Issue
相似的 Issue
-
难度 1/5 1 小时以内 新手友好度 65/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 65/100
维护者通常 25 天内回复
-
难度 2/5 1-3 小时 新手友好度 70/100
libnativeapi/nativeapi#21 ·
-
area: core complexity: easy impact: medium
难度 2/5 1-3 小时 新手友好度 86/100
ueberdosis/tiptap#8668 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复