Skip to content

[$10][MSFT-20] [Challenge Feed] "SRMs" menu text contrast between foreground and background colors won't meet WCAG 2 AA contrast ratio thresholds #2743

Closed
@veshu

Description

@veshu

Steps to Reproduce

  1. Go to https://www.topcoder.com/challenges and Login using valid credentials
  2. Check the "SRMs" menu

Expected Result
Expected contrast ratio of 4.5:1

  • Passes AA, if you change text color to #006FEB. New contrast ratio: 4.5
  • Passes AA, if you change background color to #383846. New contrast ratio: 4.51

Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.

Actual Result
Element has insufficient color contrast of 2.45 (foreground color: #55a5ff, background color: #fafafb, font size: 15.0pt, font weight: normal). Expected contrast ratio of 4.5:1

Device: Desktop/Labtop
Operating System: Windows
Browser: Chrome

WCAG Category: 1. Perceivable
WCAG Level: AA
WCAG Success Criterion: 1.4.3 Contrast (minimum)
Screen Reader Used: N/A
Accessibility Audit Tool used: Other

Attachment
https://topcodermsft-my.sharepoint.com/personal/pd-topcoder_topcodermsft_onmicrosoft_com/Documents/Forms/All.aspx?cid=58da9b68%2Df2a3%2D45d2%2Dbbae%2D15abdfd0865b&FolderCTID=0x0120005C598A51049FC14CBA882E1AEE168F51&id=%2Fpersonal%2Fpd%2Dtopcoder%5Ftopcodermsft%5Fonmicrosoft%5Fcom%2FDocuments%2FMSFT%2DTeams%2DQA%2FJune%202019%2F29%20Jun%2FTest%20Results%2FBug%20Videos%20%26%20Log%20Files%2Fcodejam%2DAccessibility%2F5

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions