1

I found this sidebar on Dribbble:

enter image description here

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

enter image description here

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:

enter image description here

Does color contrast still matter to WCAG when the background has a reduced opacity?

Improve this question
1
  • 1
    Usually color contrast is computed using the element's RGB value but when an opacity is applied, you have to use the color that's rendered and not the RGB value. 3.78 fails unless the font is 14pt+bold or 18pt+normal
    – slugolicious
    Commented Sep 7, 2023 at 7:16

2 Answers 2

Reset to default
2

Yes! WCAG contrast ratio requirements still must be met on hover, active, and focus states. The only state that doesn't require contrast minimums is the disabled state.

It's worth noting, as mentioned in this article, that contrast minimums don't have to be met across states. For example, hover doesn't have to provide a minimum amount of contrast with the default idle state. But text on a background is still text on a background and subject to contrast requirements.

Improve this answer
3
  • 1
    I think the "yes" answer is to the OP's last question, "Does color contrast still matter to WCAG when the background has a reduced opacity?". The "yes" answer does not apply to "I'm wondering if it's fully accessible?" nor to "is this type of design WCAG compliant?" because those answers are "no".
    – slugolicious
    Commented Sep 7, 2023 at 7:14
  • Correct - there were a few questions here, I answered the last one. :)
    – Izquierdo
    Commented Sep 7, 2023 at 13:54
  • 1
    You may want to make that clear in your answer. You said “yes” and then qualified it by saying contrast applied to hover and other states, which actually wasn’t one of the OP’s questions. They were asking if contrast applied to opacity, not hover. The opacity happened to be applied when you hovered. You have good info, just update your answer to make it clear which question you are answering and that you are also answering a question that was not asked, namely, is contrast required between states, which you correctly said “no“.
    – slugolicious
    Commented Sep 7, 2023 at 14:28
1

We all know dribbble isn't compliant with standards and accessibility issues. Just change the background color to a darker one.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.