Skip to content

a11y: fix funny-toast color contrast using Bootstrap utility classes#528

Open
xpoes123 wants to merge 1 commit into
qbreader:mainfrom
xpoes123:a11y/funny-toast-contrast
Open

a11y: fix funny-toast color contrast using Bootstrap utility classes#528
xpoes123 wants to merge 1 commit into
qbreader:mainfrom
xpoes123:a11y/funny-toast-contrast

Conversation

@xpoes123

@xpoes123 xpoes123 commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Replaces the inline style="background-color: yellow" and text-danger on the #funny-toast header with Bootstrap utility classes that meet WCAG contrast requirements.

Problem

In both client/play/tossups/index.html and client/play/mp/room.html, the toast header used:

  • style="background-color: yellow" — bypasses Bootstrap theming
  • class="... text-danger" — red text on yellow background yields ~4.0:1 contrast, which fails WCAG AA for normal-weight text (threshold: 4.5:1)

Changes

  • Removes inline style attribute; replaces with bg-warning Bootstrap utility class.
  • Changes text-danger to text-dark, giving the bg-warning + text-dark pairing (~11.7:1 contrast) standard in Bootstrap's own documentation.

Risk & testing

Both files are updated identically. Toast IDs, role="alert", aria-live, and aria-atomic attributes are unchanged. The high-visibility yellow intent is preserved via bg-warning. node --check passes.

@xpoes123 xpoes123 changed the title a11y: improve funny-toast color contrast a11y: fix funny-toast color contrast using Bootstrap utility classes Jun 30, 2026
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