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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,167 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
76/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
html, sass
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu với các dòng được liên kết trong src/resources/formats/html/templates/title-block.scss và so sánh kiểu dáng nhãn danh mục giữa các giao diện tích hợp sẵn. Kết xuất tài liệu Quarto được cung cấp với title-block-banner: true và kiểm tra các danh mục bằng axe-core. Hoàn tất khi văn bản danh mục đạt độ tương phản 4,5:1 so với nền trong các giao diện mặc định, cả khi có và không có banner.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
478
Merge trung bình
17 giờ 36 phút
Pull request đã merge (30 ngày)
139

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.