a11y: `opacity: 0.9` on h3 to h6 pushes links in headings below WCAG AA contrast

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,169 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
83/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
css, html, sass
Domaine
accessibility, frontend

Piste de recherche

Commencez dans src/resources/formats/html/bootstrap/_bootstrap-rules.scss, à la règle d’opacité des titres référencée dans le rapport. Générez le rendu de l’exemple QMD fourni et exécutez axe-core pour vérifier le contraste des liens dans h4, h5 et h6. Le travail est terminé lorsque ces liens conservent le contraste de la couleur de lien du thème et qu’axe-core ne signale plus la violation color-contrast.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

accessibility bug
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
Langage dominant
JavaScript
Étoiles
6.1k
Forks
476
Merge moyen
17 h 7 min
PR mergées (30 j)
112

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.