I found this sidebar on Dribbble:
And I'm wondering if it's fully accessible? It looks like when a menu item is active, it's given a semi-transparent background. And when you hover over another menu item, it's also given a semi-transparent background, for as long as you're hovering over it.
The question I'm having is - is this type of design WCAG compliant? Because if you take a screenshot and use the eyedropper tool to get the hexes, the background of an active menu item is #547BEE with the text being close to white at #F5FFFE, and this actually fails an accessibility check on WebAim
But does that matter? Maybe the background is not actually #547BEE, but really #ffffff at 4% opacity? For example, these rectangles have different hexes, but they look similar:
Does color contrast still matter to WCAG when the background has a reduced opacity?