From bd6c345a555893e2d40ce2c8844bbea45f22adde Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Sun, 19 Jul 2026 10:30:54 +0200 Subject: [PATCH] fix: meet contrast on video-message message titles The message cards use the muted 'card-icon-secondary' treatment, so the title inherits --bs-secondary; on the section's bg-body-tertiary background that grey is only 4.44:1, failing WCAG color-contrast. Render the message title in the body colour (the icon keeps its accent), which restores readable, accessible titles. Surfaced by the component-library Lighthouse sweep. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../components/video-message/video-message.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/component-library/components/video-message/video-message.scss b/component-library/components/video-message/video-message.scss index 5182262..d8d4ca1 100644 --- a/component-library/components/video-message/video-message.scss +++ b/component-library/components/video-message/video-message.scss @@ -58,3 +58,11 @@ left: 100%; bottom: 0; } + +// The message cards use the muted "card-icon-secondary" treatment, so the title inherits +// --bs-secondary; on the section's bg-body-tertiary background that grey fails WCAG contrast +// for the title text (measured 4.44:1). Keep the accent on the icon, but render the message +// title in the body colour so it stays readable. +.video-message .card-title { + color: var(--bs-body-color); +}