[$10][MSFT-22] [Challenge Feed] TCO icon 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 and Login using valid credentials
2. In 'My Challenges' list; check the TCO icon (eg: Cd, F2F, Wb, DF2F, FE, Wg, MM)

Expected Result
Expected contrast ratio of 4.5:1

• Passes AA, if you change background color to #2C4C0F. New contrast ratio: 4.5
• Passes AA, if you change text color to #3E8000. 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.01 (foreground color: #60c700, background color: #effae5, font size: 7.5pt, font weight: bold).

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=false&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%2F7

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[r0hit-gupta]

Please assign me

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[r0hit-gupta]

@Dara-K can you please suggest the color for this one? Thanks.

[Dara-K]

@r0hit-gupta I have updated the color pallette we use for TC in particular the dark shades of color: https://marvelapp.com/c7h2a6h/screen/59648056/handoff

For your question:
On development: green shape with Cd and TCO text should be # 258205
On design: blue shape and TCO text should be # 0076A5
On MM: orange shape and TCO text should be # BA4C00

[cwdcwd]

[500]: Challenge for the updated issue 2745 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]

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

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[r0hit-gupta]

@crazyk07 @lakshmiathreya new PRs - #3165 & topcoder-archive/topcoder-platform-topcoder-react-ui-kit#21 should solve this now. Please review.

Also, please note that PR #3165 depends upon topcoder-archive/topcoder-platform-topcoder-react-ui-kit#21

[lakshmiathreya]

Green and Orange shapes seem accurate - 258025 and BA4C00 resp.
But Blue shape is 006ad7 - not 0076A5. Pls clarify @r0hit-gupta @crazyk07. fyi @tosha5252 @drasticdpk

[r0hit-gupta]

@r0hit-gupta I have updated the color pallette we use for TC in particular the dark shades of color: https://marvelapp.com/c7h2a6h/screen/59648056/handoff

For your question:
On development: green shape with Cd and TCO text should be # 258205
On design: blue shape and TCO text should be # 0076A5
On MM: orange shape and TCO text should be # BA4C00

@lakshmiathreya check this out. #2745 (comment)

[Dara-K]

006AD7 is the color for the links and buttons - the main blue color
0076A5 is the color for the blue for Design track.
https://marvelapp.com/c7h2a6h/screen/59648056/handoff

[sushilshinde]

kit needs deployment

[tosha5252]

verified changed

Windows 10 env
Browser: Chrome

[tosha5252]

Verified

Win10/Chrome

[crazyk07]

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

This is an automated message for crazyk via Topcoder X