Notebook preview header title takes the heading colour on the primary background

オープン 初心者向け
  • 何か問題がありますか？
#15,306 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
85/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
bootstrap, javascript, sass
領域
accessibility, frontend

調査の方向性

リンクされた埋め込みテンプレート src/resources/formats/html/embed/template.html、特に126～129行目から確認し、そのスタイルブロックと #quarto-embed-header.bg-primary 内の h6 を調べます。提供されたカスタムテーマ設定 $headings-color とノートブックの埋め込み例を使って再現します。タイトルが戻るボタンの白いテキストと同じ色になり、プライマリ背景に対して十分なコントラストを持てば完了です。

索引モデルが issue の本文から書いたものです。

説明

accessibility bug embed
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 notebook preview page puts its title in an h6 inside #quarto-embed-header.bg-primary.
.bg-primary sets only the background, and Bootstrap gives every heading color: var(--bs-heading-color).
When a theme sets $headings-color, the title takes that colour on the primary background, while the back button next to it stays white.

With default, cosmo, flatly, and litera, $headings-color is unset, so the title inherits white and the problem does not show.
A theme or brand with dark heading ink is enough to break it.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: "Embed header"
format:
  html:
    theme: [default, custom.scss]

custom.scss:

/*-- scss:defaults --*/
$headings-color: #1f2a37;

index.qmd:

---
title: "Embed header contrast"
---

{{< embed notebook.ipynb#answer >}}

notebook.ipynb holds one code cell with #| label: answer and a saved output.
Run quarto render and open _site/notebook-preview.html.

Actual behavior

Computed colours in Chromium 156:

header background  rgb(13, 110, 253)
h6 title           rgb(31, 42, 55)    3.23:1
back link button   rgb(255, 255, 255)

The title is 1.1em at weight 400, so it needs 4.5:1 under WCAG 2.2 Success Criterion 1.4.3.
With $primary: #47709a as well, the ratio drops to 2.81:1.

Expected behavior

The title uses the same colour as the back button beside it.
Adding #quarto-embed-header h6 { color: inherit; } to the page brings the title back to white (4.50:1 on the default primary).
That rule could sit in the style block of the embed template.

Before With color: inherit
Notebook preview header: the notebook title in dark ink on the blue primary bar, next to white buttons Notebook preview header: the notebook title in white like the buttons beside it
Your environment
  • IDE: none, command line.
  • OS: macOS 27.2.
  • Browser: Chromium 156.0.8078.4 (Playwright).
Quarto check output

Reproduced with a development build of main at 089ba530b.
The embed template is the same at the v1.11.9 tag.

Quarto 99.9.9
[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
      Project: none found (single-file mode)
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.107.1: OK
      Deno version 2.9.8: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 089ba530b3ed4ec156a355d41b6b7de2db3e44ea
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin
[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)
[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2026
[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser
[✓] Checking basic markdown render....OK
主要言語
JavaScript
スター
6.1k
フォーク
478
平均マージ
17時間 53分
マージ済み PR（30日）
135

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。