Contrast Interactive Elements#
Test Type Performed#
Low contrast on interactive elements.
Artifact Evaluated#
Plot tools. Specifically, evaluating the interface icons that are used to access the tools that are in the scatter plot.
Results Summary#
Plot tools fail for minimum contrast on interactive elements. Results are 2.65:1, 1.42:1, and 1.86:1 (respectively to image evidence below.)
Expected Behavior (Pass/Fail)#
FAIL - We would expect interactive elements to pass a contrast ratio of 3:1 for the new state change against its previous state.
Image or Video of Failure#
A scatter plot is shown. A plotting tool button is toggled active on the right. The contrast checking score is shown on the bottom left corner (fails).#
A scatter plot is shown. A plotting tool button has a mouse hover highlight on the right, while the contrast checking score is shown on the bottom left corner (fails).#
A scatter plot is shown. A plotting tool button is selected, toggled “on”, and has a mouse hover on the right highlight. The contrast checking score is shown on the bottom left corner (fails).#
Steps to Reproduce#
Using a dropper tool to gather the color, compare the foreground color against the background color to calculate the contrast score.
In this particular case, we tested the blue “selected” highlight of the icon against the full white background (1), the light-gray hover highlight against the full white background (2), and the blue “selected” highlight against the light-gray hover highlight (3). Avoiding aliased/partial pixels.
Guidelines and Standards Used#
Low contrast on interactive elements https://chartability.github.io/POUR-CAF/#lowcontrastoninteractiveelements
Known or Documented Issues#
(If there is already a github issue created for this test or a related test, it will be listed here.)
Technical Details#
Chrome Version 127.0.6533.89 (64-bit)
WCAG Color Contrast checker extension
Windows 11 Build 22631.3958
Updated as of: August 2nd, 2024