a11y: title block category badges fail contrast because of `opacity: 0.6`

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,167 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
76/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
html, sass
Domaine
accessibility, frontend

Piste de recherche

Commencez par les lignes liées de src/resources/formats/html/templates/title-block.scss et comparez les styles des badges de catégorie dans les thèmes intégrés. Générez le document Quarto fourni avec title-block-banner: true et vérifiez les catégories avec axe-core. Le travail est terminé lorsque le texte des catégories présente un contraste de 4,5:1 avec l’arrière-plan dans les thèmes par défaut, avec et sans la bannière.

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 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:

A blue title banner with the categories R and QUARTO as faded outlined badges.

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

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.