[Feature]: Add Element Colour Contrast Matcher

[jharrilim]

Feature Request

Description:

This would give users another tool in their toolkit to ensure an aspect of their site stays accessible.

Possible solution:

This would ideally come in the form of a matcher like:

expect(element).toHaveContrastRatio(6);

And some reasonable pseudocode for determining the colour contrast might look like:

toHaveContrastRatio(ratio) {
  // Not too sure what this is like under the hood,
  // but this would reference the variable inside expect()
  const el = this.expected;

  const color = el.computedStyleMap().get('color');

  // 2. query ancestors until you find the nearest
  //    background-color that isn't transparent
  let parent = el;
  while (parent) {
    const bg = parent.computedStyleMap().get('background-color');

    if (bg.toString() !== 'rgba(0, 0, 0, 0)') {
      const actualContrastRatio = computeRatio(color, bg);
      return actualContrastRatio === ratio;
    }
    parent = parent.parentElement;
  }
}

---

WebAIM has a nifty contrast checker script that they use on their contrast checker page. Might be a good reference for the computeRatio part!