a11y: title block category badges fail contrast because of `opacity: 0.6`
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 76/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- html, sass
调研方向
从链接的 src/resources/formats/html/templates/title-block.scss 行开始，比较内置主题中的类别徽章样式。使用 title-block-banner: true 渲染提供的 Quarto 文档，并用 axe-core 检查类别。完成标准是：在默认主题中，无论是否显示横幅，类别文本与背景的对比度都达到 4.5:1。
由索引模型根据 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 categories in an HTML title block are styled with opacity: 0.6, and they fail WCAG 2.2 SC 1.4.3 (Contrast, Minimum) with the built-in themes.
Opacity blends the text and the border toward the background, so the colour the author or the theme chose is not the colour that is measured.
The text is 0.65em and uppercase, so the 4.5:1 threshold applies.
axe-core color-contrast (serious) results on a page with categories: [r, quarto]:
| Setup | Text on background | Ratio |
|---|---|---|
default theme, title-block-banner: true |
#b8c8d6 on #517699 |
2.78:1 |
| default theme, no banner | #7a7c7f on #ffffff |
4.18:1 |
cosmo, title-block-banner: true |
#969797 on #f8f9fa |
2.77:1 |
The badges with the default theme and title-block-banner: true:
This is the same pattern as the appendix opacity: 0.9 in #14679, and a theme cannot undo it from a descendant element.
Steps to reproduce
---
title: "Category contrast test"
categories: [r, quarto]
title-block-banner: true
---
Content.
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 <div class="quarto-category">, with the ratios in the table above.
Expected behavior
The category text meets 4.5:1 against its background with the default themes and with title-block-banner: true.
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
- 派生
- 478
- 平均合并
- 17 小时 7 分钟
- 30 天内合并 PR
- 112
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
quarto-dev/quarto-cli 的其他 Issue
-
enhancement websites
难度 2/5 1-3 小时 新手友好度 78/100
quarto-dev/quarto-cli#15255 · 1 条评论 ·
维护者通常 1 天内回复
-
Website announcement dismiss control cannot be reached or used with a keyboard可能已有人在做 @Xander-AJ 于 1 天前认领。 未关闭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 于 2 天前认领。 未关闭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 于 2 天前认领。 未关闭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 天内回复
查看 quarto-dev/quarto-cli 的全部 Issue
相似的 Issue
-
bug confirmed js v6
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
BUG
难度 1/5 1-3 小时 新手友好度 90/100
linuxmint/cinnamon-spices-applets#9223 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 70/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
fastify/fastify-swagger-ui#299 ·