Skip to content

Fix low color contrast of spatial audio caption in dark mode - #2210

Open
HariniMalothu17 wants to merge 1 commit into
microsoft:mainfrom
HariniMalothu17:fix/sound-spatial-audio-caption-contrast
Open

Fix low color contrast of spatial audio caption in dark mode#2210
HariniMalothu17 wants to merge 1 commit into
microsoft:mainfrom
HariniMalothu17:fix/sound-spatial-audio-caption-contrast

Conversation

@HariniMalothu17

@HariniMalothu17 HariniMalothu17 commented Aug 3, 2026

Copy link
Copy Markdown
Collaborator

Summary

On the Sound sample page, the caption "Can only enable spatial audio when sound is on!" under the Enable Spatial Audio checkbox has insufficient color contrast in dark mode.

It used:

<TextBlock
    FontStyle="Italic"
    Foreground="{ThemeResource SystemColorHotlightColor}"
    Style="{ThemeResource CaptionTextBlockStyle}"
    Text="Can only enable spatial audio when sound is on!" />

SystemColorHotlightColor is the hyperlink text color (it is even described that way in the gallery's own Samples/Color/brushes.json). It is not part of the theme's text-color ramp, so in dark mode the caption renders at roughly 2.78:1 against the page background - below the 4.5:1 minimum (MAS 1.4.3 - Contrast (Minimum)).

Fix

Use the theme-aware TextFillColorSecondaryBrush, which adapts to light and dark themes and meets the contrast requirement, for this secondary caption text:

Foreground="{ThemeResource TextFillColorSecondaryBrush}"

One-line change in SoundPage.xaml. No behavioral change.

Repro (before fix)

  1. Set Settings -> App theme -> Dark.
  2. Open the Sound page.
  3. Observe the italic caption under the Enable Spatial Audio checkbox - it is a faint hyperlink-blue that fails 4.5:1 contrast.

After the fix, the caption uses a theme-aware secondary text color that passes the contrast requirement in both themes.

Testing

  • Built WinUIGallery (Debug/x64) -> 0 errors.
  • Verified the caption uses a contrast-compliant, theme-aware brush.
  • Aligns with the gallery's accessibility conventions (enforced by the Axe.Windows UI test scans).
image

The "Can only enable spatial audio when sound is on!" caption on the
Sound sample page used Foreground="{ThemeResource SystemColorHotlightColor}".
SystemColorHotlightColor is the hyperlink text color and is not part of
the theme's text-color ramp, so in dark mode the caption renders at a
contrast ratio of ~2.78:1 against the page background - below the 4.5:1
minimum (MAS 1.4.3 - Contrast).

Use the theme-aware TextFillColorSecondaryBrush, which adapts to light
and dark themes and meets the contrast requirement, for this secondary
caption text.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 2620f9d2-ff0f-45b0-aa36-3626abe3e83a
@HariniMalothu17

Copy link
Copy Markdown
Collaborator Author

/azp run

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