Element's background color could not be determined because it is overlapped by another element

user_3347375 0
Viewed 244

I am trying to create an accessible switch element but my accessibility report says Elements must have sufficient color contrast with the reason mentioned as Element's background color could not be determined because it is overlapped by another element for label element. I am still learning the accessibility aspect so I don't have much idea why I am getting this warning. I tried using pseudo-element instead of span, changing z-index for label, adding background color with high contrast but nothing seems to help. What am I missing here

.switch {
  --handle-width: 30px;
  --transition-duration: 250ms;
  --handle-transition: all var(--transition-duration) ease-in-out;
  display: flex;
  position: relative;
  gap: 8px;
  cursor: pointer;
}

.switch--checkbox {
  visibility: hidden;
  position: absolute;
  top: -50%;
  left: -50%;
}

.switch--handle {
  display: inline-block;
  box-sizing: border-box;
  width: calc(2 * var(--handle-width));
  height: var(--handle-width);
  border-radius: var(--handle-width);
  background-color: hsl(5, 76%, 95%);
  border: 1px solid hsl(5, 76%, 85%);
  transition: var(--handle-transition);
}

.switch--handle-ball {
  position: absolute;
  --offset: 2px;
  top: var(--offset);
  left: var(--offset);
  height: calc(var(--handle-width) - 2 * var(--offset));
  width: calc(var(--handle-width) - var(--offset));
  border-radius: 50%;
  background-color: hsl(346, 66%, 100%);
  transition: var(--handle-transition);
}

.switch--checkbox:checked+.switch--handle {
  background-color: hsl(129, 60%, 85%);
  border-color: hsl(129, 60%, 85%);
}

.switch--checkbox:checked~.switch--handle-ball {
  left: var(--handle-width);
  background-color: hsl(346, 66%, 100%);
}
<label for="switch-input" class="switch">
      <input type="checkbox" id="switch-input" class="switch--checkbox" />
      <div class="switch--handle" hidden></div>
      Send notification
      <span class="switch--handle-ball" />
    </label>

accessibility css html
1 Answers

You need to test the accessibility values of the colors of your site. That color for your false state is a very light pink... can't really tell. When I use an accessibility tester (i.e.; webaim.org), it will return a contrast ratio.

When I entered the hsl color for your false state switch, it returns the following results: https://webaim.org/resources/contrastchecker/?fcolor=F6C1BC&bcolor=FFFFFF.

enter image description here

From within that tool, you can play around with the color scheme until you get your colors where you need them. There are colorblind people that use the web and some of the colors they typically can't see are red and green.

Here's another resource you can use that explains colorblindness testing:

https://css-tricks.com/accessibility-basics-testing-your-page-for-color-blindness/

user_24648650
Related