Description
In the debugger's button, the contrast ratio of the white text on the blue background is lower than the WCAG recommended 4.5. This may be a problem for developers with lower color acuity not being able to see the event count on the button.
When running automated browser tests, we use Deque's axe_core_gems package to run the ruleexpect(page).to be_axe_clean which checks a lot of WCAG rules on the page. If I'm running the tests locally having built the page with the debug flag, my tests will fail at the end. This can be a hassle as I then have to rebuild the page without the debugger button to have that test pass.
The be_axe_clean expectation supports skipping elements on the page by CSS selector. If we could target the debugger button by ID or class that would let us update all of our automated accessibility checks to skip the button with expect(page).to be_axe_clean.excluding('#elm-debugger-button'). As it is we need to try to get it with a button:nth-child of an nth-child of an nth-child that is different on every page so we just rebuild the page before running tests locally.
In summary, the solutions to this are twofold
- make the background color of the button darker so it doesn't violate current WCAG standards
- make the button targetable with a CSS/Xpath selector so it can be ignored if it violates future standards