[$10][MSFT-257] "Login" button foreground and background colors missed WCAG 2 AA contrast ratio

[veshu]

Steps to Reproduce

1. Open private tab and go to: https://www.topcoder.com/challenges
2. Right click > Inspect Elements
3. Check the "Login" button

Expected Result

• Contrast ratio should be 4.5:1
• If you want passes WCAG 2 AA, you can change text color to #0074E8. New contrast ratio: 4.5:1

Actual Result
Foreground Color: #0681FF
Background Color: #FFFFFF
Contrast Ratio: 3.75:1
=> Therefor, "Login" button foreground and background colors missed WCAG 2 AA contrast ratio

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=b9c070b1%2Dbb96%2D40e1%2Db92f%2D16f47db5d911&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%2Fdoremihong%2FTest%20for%20Accessibility%20Challenge%2FBug%5F36

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[rashmi73]

@veshu @ThomasKranitsas are these open? or going to be open ?

[codeMinter]

@rashmi73 Bug Bash is being launched, these will become open then. Keep an eye on slack challenge dev-challenges for Bug Bash launch.

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[rashmi73]

@Oanh-and-only-Oanh ready #2953

[Dara-K]

@rashmi73 I am late to the party, but please use the #006AD7 for the button text color and border. This will be the new blue color for all our main buttons.

[rashmi73]

@Dara-K sure

[rashmi73]

@codeMinter PR updated topcoder-archive/topcoder-platform-topcoder-react-ui-kit#11

and new PR topcoder-archive/topcoder-platform-topcoder-react-ui-kit#11

[rashmi73]

@codeMinter @sushilshinde PR for qa-accesility at topcoder-react-ui-kit
topcoder-archive/topcoder-platform-topcoder-react-ui-kit#13

[codeMinter]

@rashmi73 let's only keep single PR, we can edit the old one for new base branch. I have updated and closed topcoder-archive/topcoder-platform-topcoder-react-ui-kit#13

[sushilshinde]

I have reverted the PR for now on community-app please PR again and test

@codeMinter @rashmi73

[codeMinter]

@rashmi73 I see the issue, looks like changes done by you have got updated due to some other PR, can you create new PR and use color code as $tc-dark-blue-110. Kindly mark me on PR as soon as done.

[codeMinter]

@rashmi73 I see the issue, looks like changes done by you have got updated due to some other PR, can you create new PR and use color code as $tc-dark-blue-110. Kindly mark me on PR as soon as done.

@rashmi73 any updates here ?

[rashmi73]

@codeMinter just 10 minutes

[rashmi73]

@codeMinter @veshu PR is now #3149

[drasticdpk]

Verified on
Operating System: Windows
Browser: Chrome

[crazyk07]

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

This is an automated message for crazyk via Topcoder X