Focus indicator has insufficient color contrast on "Home" and "Privacy" links.: A11y_.NET Core Cloud Platform (ASP.NET Core)_WebSample_NonTextContrast
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 290
Description
### Github Tags:
#A11yTCS; #A11yMAS; #WCAG1.4.11; #A11ySev2; #ScreeReader; #E2E_.NETCoreCloudPlatform_Web_Aug2026; #DesktopWeb; #FTP; #.NET Core Cloud Platform; #ChromiumEdge; #NonTextContrast; #a11ydb-focus-low-contrast;
### Issue Subcategory:
Focus indicator has low contrast
### User Experience:
People who are primarily using keyboard to navigate and have low vision may not be able to see where focus is located, making keyboard navigation hard to follow.
### Repro Steps:
Open URL: http://localhost:5021 > Home and Privacy links> Observe the issue.
### Actual Result:
When keyboard focus moves to the Home and Privacy links, the focus border is visible but has a contrast ratio of only 1.285:1, making it difficult to perceive.
### Expected Result:
The focus indicator should have a contrast ratio of at least 3:1 against adjacent colors/background so that keyboard users can easily identify the focused element.
### How to Fix:
Adjust the focus indicator color to achieve 3:1 contrast. Consider using a thick (2px+) outline with a contrasting color, or combine outline with `box-shadow` for visibility on varied backgrounds.
**Similar issue also observed in below scenarios:**
Issue 1: Blazer sample app: Open URL: http://localhost:5055/weather > Home, Counter and whether tab links> Observe the issue Focus indicator has insufficient color contrast on Home, Counter and whether tab links.
### Environment details:
Application Name: .NET Core Cloud Platform (ASP.NET Core)
URL: http://localhost:5021
OS: Windows 11 Enterprise Insider Preview 26300.8276
### Note:
"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility tester after bug verification."
"Contact [CAI Accessibility Support Channel](https://teams.microsoft.com/l/channel/19:DeCtYeREyQHw5jYsz9PPc3hpVw48m-tOlTkQ1jEn0eM1%40thread.tacv2/CAI%20Accessibility%20Support%20Channel?groupId=f5eb428c-9e6e-4c16-8143-33fe3961a9ae&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47) for Accessibility queries on design, development, test, usability or any processes"
Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.
### Attachment:
Contributor guide
Assessment
This issue has not been assessed yet.