html - Chrome 审核 - 禁用按钮的对比度不足

Question

由于这个严重问题，我的可访问性评级受到了伤害:

Background and foreground colors do not have a sufficient contrast ratio.

失败的元素:

button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed

HTML:

<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">Add to cart</button>

残疾人类的 CSS:

.button.disabled, button.disabled {
    opacity: .5!important;
    cursor: not-allowed;
}

我知道增加不透明度会使这个警告消失，但按钮看起来像一个普通按钮。我可以为 Chrome 制作一些东西来将它识别为禁用元素并且可以接受它的不透明度吗？或者 Chrome 审核无论如何都不会原谅低对比度？

Answer 1

来自之前的评论:

instead adding a classname, you may add the disabled attribute to the button, the browser does the styling itself.

<button> abled button</button> <button disabled>disabled button</button>

then for the CSS you want to override, you can filter a few rules with :not([disabled]){/*fancy style*/} to avoid styling the disabled button

button:not([disabled]) {
  background: turquoise;
  border-color: tomato;
  color: gold;
  cursor:pointer;
}

button {/* mind specifity, here overwritten via the pseudoclass :not() */
  font-size: 2em;
  cursor: not-allowed;
}

<button> abled button</button> <button disabled>disabled button</button>