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

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,306 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
85/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
bootstrap, javascript, sass
Bereich
accessibility, frontend

Rechercherichtung

Beginne mit der verlinkten Embed-Vorlage unter src/resources/formats/html/embed/template.html, insbesondere mit den Zeilen 126–129, und untersuche ihren Style-Block sowie das h6 innerhalb von #quarto-embed-header.bg-primary. Reproduziere das Problem mit der bereitgestellten benutzerdefinierten Theme-Einstellung $headings-color und dem Notebook-Embed-Beispiel. Fertig ist es, wenn der Titel mit dem weißen Text der Zurück-Schaltfläche übereinstimmt und auf dem primären Hintergrund ausreichend Kontrast aufweist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
478
Ø Merge
17 Std. 53 Min.
Gemergte PRs (30 T.)
135

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.