microsoft / microsoft/BotFramework-WebChat
[White Label - Audiocard]: In High contrast Aquatic mode, Luminsoity ratio of Play, Voice and More icons which are less than required ratio of 3:1.
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 1.8k
- Forks
- 1.6k
- Avg merge
- 22h 58m
- Merged PRs (30d)
- 2
Description
Is it an issue related to Adaptive Cards?
No.
What is the PWD impact?
Users with low vision or users who rely on High Contrast Aquatic mode to improve visual clarity may struggle to identify or locate the Play, Voice, and More icons due to insufficient contrast. Poor visibility of these icons can lead to difficulty understanding available actions, reduced efficiency, and potential inability to interact with essential controls.
What browsers and screen readers do this issue affect?
Others
Are there any code-based customization done to Web Chat?
No, I am using Web Chat without any customizations except "styleOptions".
What version of Web Chat are you using?
Latest production
Which area does this issue affect?
Contrast ratio
What is the public URL for the website?
No response
How to reproduce the issue?
Pre-Requisite:
Go to Settings--> Accessibility--> Contrast Themes--> Apply Aquatic mode.
Repro Steps
- Open URL Web Chat in EDGE browser.
- Webchat page will appear.
- Navigate to edit field and provide query 'Audiocard'.
- Response will appear.
- Observe an issue that In High contrast Aquatic mode, Luminosity ratio of Play, Voice and More icons which are less than required ratio of 3:1.
What do you expect?
In High Contrast Aquatic mode, all non‑text UI icons such as Play, Voice, and More must meet or exceed the minimum luminosity contrast ratio of 3:1 against adjacent colors.
What actually happened?
In High contrast Aquatic mode, Luminosity ratio of Play, Voice and More icons which are less than required ratio of 3:1.
Do you have any screenshots or recordings to repro the issue?
Did you find any DOM elements that might have caused the issue?
No response
MAS reference
No response
WCAG reference
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast
WAI-ARIA reference
No response
Adaptive Card JSON
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the Audiocard response in Edge with Windows High Contrast Aquatic mode and the reported styleOptions setup. Start by tracing the Play, Voice, and More icon rendering and their adjacent colors; done means each icon reaches at least a 3:1 contrast ratio and the reproduction no longer shows the accessibility failure.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100