[$10][MSFT-152] [Challenge Submission Page] 'Back to challenge' button contrast between foreground and background colors won't meet WCAG 2 AA contrast ratio thresholds

[veshu]

Steps to Reproduce

1. Go to https://www.topcoder.com/challenges/30095032/submit and Login using valid credentials
2. Check the 'Back to challenge' button

Expected Result
Expected contrast ratio of 4.5:1

• Passes AA, if you change background color to #3A3A3A. New contrast ratio: 4.55
• Passes AA, if you change text color to #737383. New contrast ratio: 4.54

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.43 (foreground color: #a3a3ae, background color: #fcfcfc, font size: 13.5pt, font weight: normal)

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&sortField=Modified&isAscending=true&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%2F59

[ThomasKranitsas]

Contest https://www.topcoder.com/challenges/30096178 has been created for this ticket.

This is an automated message for thomaskranitsas via Topcoder X

[ThomasKranitsas]

Contest https://www.topcoder.com/challenges/30096178 has been updated - the new changes has been updated for this ticket.

This is an automated message for thomaskranitsas via Topcoder X

[Dara-K]

@r0hit-gupta Please change the color to #6b6b6b

[cwdcwd]

Contest https://www.topcoder.com/challenges/30096178 has been updated - it has been assigned to anonymousjaggu.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

[500]: Challenge for the updated issue 2842 is creating, rescheduling this event

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

[400]: Failed to create challenge. Detail: Operation failed in the contest service facade.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

[400]: Failed to create challenge. Detail: Operation failed in the contest service facade.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

Contest https://www.topcoder.com/challenges/30097136 has been created for this ticket.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

Contest https://www.topcoder.com/challenges/30097136 has been updated - it has been assigned to anonymousjaggu.

This is an automated message for lazybaer via Topcoder X

[tosha5252]

Color still #a3a3ae...verified on Chrome, Edge and with WAVE tool

Pls change to #6b6b6b

[nithyaasworld]

Make sure not to hard-code any colours unless and until directed. Use variables always.

[lakshmiathreya]

@sushil I verified on multiple browsers in Mac on Prod - the color is #a3a3ae.

[sushilshinde]

Fixing will be available in an hour on production

[lakshmiathreya]

Verified color set to #6b6b6b.
Chrome on MacOS/Win 10.

[crazyk07]

This ticket was not processed for payment. If you would like to process it for payment, please reopen it, add the tcx_FixAccepted label, and then close it again

This is an automated message for crazyk via Topcoder X

[crazyk07]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30097136

This is an automated message for crazyk via Topcoder X