Skip to content

Fix the contrast of the category chips on blog posts - #2240

Draft
cwickham wants to merge 1 commit into
mainfrom
fix/blog-grey-contrast
Draft

cwickham wants to merge 1 commit into
mainfrom
fix/blog-grey-contrast

Conversation

@cwickham

@cwickham cwickham commented Sep 29, 2026 •

Copy link
Copy Markdown
Member

Quarto sets the title-block category chips to opacity: 0.6 (title-block.scss). The text colors pass, but the opacity decreases them to 2.77:1 in light mode and 3.43:1 in dark mode. Text needs 4.5:1 (WCAG 1.4.3). theme.scss and theme-dark.scss now set the chips to opacity: 1 (about 7:1).

Checked with an axe scan of the new-blog-home post before and after: the two color-contrast findings are gone. Nothing is new or worse. Full-site scan (all 374 pages, light and dark, before and after all five batch fixes): this finding is gone, and nothing is new or worse.

Check (light and dark mode)

Quarto's title-block.scss sets .quarto-category to opacity 0.6, which drops
the chips to 2.77:1 (light) and 3.43:1 (dark) (axe color-contrast). Set
opacity 1 in both themes (~7:1).
@github-actions

Copy link
Copy Markdown
Contributor

📝 Preview Deployment

🔍 Full site preview: https://deploy-preview-2240.quarto.org

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant