[$10][MSFT-224] "JOIN NOW" link foreground and background colors missed WCAG 2 AA contrast ratio

[veshu]

Steps to Reproduce

1. Go to https://accounts.topcoder.com/member
2. Right click > Inspect Elements
3. Check the "JOIN NOW" link

Expected Result

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

Actual Result Foreground Color: #0096ff Background Color: #f6f6f6 Contrast Ratio: 2.85:1 => Therefor, "JOIN NOW" link 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%5F27

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[PrakashDurlabhji]

@mishacucicea can you please tell where does this page comes from?

because it is not found in community-app repo, this page is somewhere else and then after succefull authentication we redirect

[mishacucicea]

@PrakashDurlabhji It's the https://github.com/appirio-tech/accounts-app, we're still deciding on the branch, look at dev for now.

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[PrakashDurlabhji]

@veshu @mishacucicea PR https://github.com/appirio-tech/accounts-app/pull/221

[Dara-K]

Please use the #006DEA blue color for "JOIN NOW" to keep consistency with the other links on the site.

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[PrakashDurlabhji]

@veshu @mishacucicea @codeMinter PR updated https://github.com/appirio-tech/accounts-app/pull/221

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[drasticdpk]

@PrakashDurlabhji @veshu @mishacucicea Only changing foreground color may not enough on this issue. Here is the reference https://monosnap.com/file/Zrlhw15VKnR4YzJZTZqr093r5DOhNO https://monosnap.com/file/zazepWpd6MH1n7djAHtK1mPutS5n7h

[codeMinter]

@PrakashDurlabhji @veshu @mishacucicea Only changing foreground color may not enough on this issue. Here is the reference https://monosnap.com/file/Zrlhw15VKnR4YzJZTZqr093r5DOhNO https://monosnap.com/file/zazepWpd6MH1n7djAHtK1mPutS5n7h

@PrakashDurlabhji ☝️

[PrakashDurlabhji]

@Dara-K can you please provide value for background color to match above requirements? because according to your comment foreground color is changed but background-color is left out.

@veshu

[Dara-K]

@PrakashDurlabhji Please use #006AD7 for the link color and the links should be underlined as well. I have updated the blue color for buttons and links to #006AD7. Background color can stay the same.

[PrakashDurlabhji]

@Dara-K shall we keep just changing color in the scope of ticket because making it underline for text may conflict with other PR codes because i guess tickets are raised already for making links text underline, also major scope of requirement is to change colors, so would not like to add things which would delay it more further, as I am in hurry to close issues which meets requirement immediately. thank you.

[PrakashDurlabhji]

@Dara-K I guess mine another PR had covered this issue too of changing color, so #006AD7 is present now and can be tested i feel, so kindly ignore my above comment and I have added underline code to make join now visible as link

new PR link is: https://github.com/appirio-tech/accounts-app/pull/277

[Oanh-and-only-Oanh]

passed code review per TonyJ

[tosha5252]

Verified color changed to #006AD7

OS: WIndows 10 Browser: Chrome

[ajefts]

The JOIN NOW link color is not updated in prod. These are the current colors:

[nithyaasworld]

However it passes the WCAG standards.

[nithyaasworld]

Marking it with "Prod QA Pass" as it passes the WCAG Standards.

A new ticket will be raised to address the Design Team's expectations if needed.

[crazyk07]

Closing ticket for payment.

[crazyk07]

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

This is an automated message for crazyk via Topcoder X