Reproduce with Deque Axe directly in HTML document

1. before the closing </head> tag in your HTML document, add: <script src="https://cdn.jsdelivr.net/npm/[email protected]/axe.min.js"></script> (or <script src="https://unpkg.com/@daisy/[email protected]/axe.min.js"></script>)
2. before the closing </body> tag in your HTML document, add:

<script type="text/javascript">
  console.log("DEQUE AXE...");
  window.axe.run(
    {
      "rules": {
        "bypass": { enabled: false },
        "region": { enabled: false },
        "page-has-heading-one": { enabled: false },
        "landmark-complementary-is-top-level": { enabled: false },
      }
    },
    function(axeError, axeResult) {
      if (axeError)  {
        console.log(JSON.stringify(axeError, null, 4));
        return;
      }
      console.log(JSON.stringify(axeResult.violations, null, 4));
      if (axeResult.violations)
      setTimeout(() => {
        document.body.textContent = "";
        for (const v of axeResult.violations.reverse()) {
            const el = document.createElement("textarea");
            el.setAttribute("style", "width: 100%;");
            el.setAttribute("rows", "50");
            el.value = JSON.stringify(v, null, 4);
            document.body.appendChild(el);
        }
      }, 500);
    }
  );
</script>

Now, load xxx.xhtml in Chromium-based web browsers preferably (for example, Google Chrome or Microsoft Edge), and you should see the error. Note that Firefox and Safari on MacOS do not report colour contrast errors in the same way.