[wp-meta] [Making WordPress.org] #8000: Accessibility: Event category on video container failing on contrast ratio

[Making WordPress.org]

#8000: Accessibility: Event category on video container failing on contrast ratio
--------------------------+-----------------------------
 Reporter:  rollybueno    |      Owner:  (none)
     Type:  enhancement   |     Status:  new
 Priority:  normal        |  Milestone:
Component:  WordPress.tv  |   Keywords:  has-screenshots
--------------------------+-----------------------------
 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:
 [[Image(https://i.imgur.com/okomyyq.png)]]

 **WCAG** result
 [[Image(https://i.imgur.com/G6HoSnY.png)]]

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/8000>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org