fix luminosity ratio of RAI Vision dashboard success and failure instances text to background for accessibility

[imatiach-msft]

Description

fix luminosity ratio of RAI Vision dashboard success and failure instances text to background for accessibility

[Visual Requirement – Responsible AI Dashboard – Vision Data Explorer>Image Explorer View]: Luminosity ratio of Success Instances "27" numeric value is less than 4.5:1.

User Experience:
Low vision users will get impacted as they will not be able to see the controls such as static text/numeric value present on the page properly & will face difficulties while reading the content on the page if the luminosity ratio of the any control does not meet the minimum requirement of 4.5:1 ratio.

Repro Steps:
Open RAI dashboard
Navigate the "Vision Data Explorer" section, navigate the "Image Explorer View" tab and all the controls present under it.
Navigate to the "Success Instances" section.
Observe weather luminosity ratio of Success Instances count "27" numeric value with respect to its background color is greater than 4.5:1 or not.
Actual Result:
Luminosity ratio of Success Instances "27" numeric value with respect to its background color is 4.3:1 which is less than minimum contrast ratio: 4.5:1.
Expected Result:
The Luminosity ratio of Success Instances "27" numeric value with respect to its background color should be greater than or equal to 4.5:1.

Issue:
Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (color-contrast - https://accessibilityinsights.io/info-examples/web/color-contrast)

Screenshot before fix:

Screenshot after fix:

Checklist

• I have added screenshots above for all UI changes.
• I have added e2e tests for all UI changes.
• Documentation was updated if it was needed.

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/ilmat/fix-vision-instances-luminosity/dashboard/index.html