dotnet / dotnet/aspnetcore

Focus indicator has insufficient color contrast on "Home" and "Privacy" links.: A11y_.NET Core Cloud Platform (ASP.NET Core)_WebSample_NonTextContrast

Closed
#68,228 3 comments 1 reaction 3 assignees Claimed by @PoojaNamde View on GitHub
area-identity area-mvc feature-accessibility
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:

Image

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.