Accessibility: Event category on video container failing on contrast ratio

[rollybueno]

I have run the accessibility check using Lighthouse and it flags the contrast issue: Background and foreground colors do not have a sufficient contrast ratio. on the event span of the video under the heading 3, which is the title.

I have to double check just to make sure that the Lighthouse is not a false report, I have checked the video container and the event span contrast which has:

• 2f2f2f background color of the .main-video
• 8e8e8e color of the .wptv-hero .main-video .video-event a

Using ​https://webaim.org/resources/contrastchecker/, this combination only works on the large text and graphical objects, but failed on the normal text due to contrast ration score of just 4.08:1.

You can confirm this if you go to the ​https://wordpress.tv/ and it's bit hard to see that text.

Solution is simple. We can use d0d0d0 text folor of the .video-event of the anchor to increase the ration score to 8.68:1 which passes WCAG.

Lighthouse scan result:

WCAG result

This PR updates the text color from #8e8e8e to #d0d0d0 on main video sections with a #2f2f2f background to meet WCAG AA accessibility standards. The previous color combination had insufficient contrast for normal-sized text, which could hinder readability for users with visual impairments.

New contrast ratio is ~8.68:1, exceeding the required minimum of 4.5:1 for normal text.

Changes:

• Updated text color in .wptv-hero .main-video .video-event a
• Verified contrast using WebAIM Contrast Checker

This improves overall accessibility and user experience.

Trac: https://meta.trac.wordpress.org/ticket/8000

[rollybueno]

Result:

Looking forward for any feedback.