Contrast Interactive Elements#

Test Type Performed#

Low contrast on interactive elements.

Artifact Evaluated#

Plotting interface. Specifically, evaluating the interfaces for all charts in our test environment: line, bar, table and scatter plot.

Results Summary#

Plotting interface fails for minimum contrast on interactive elements for the data table. Results are 1.07:1.

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 data table is shown. A row is selected and highlighted. The contrast checking score is shown on the bottom left corner at 1:07:1 (fails).

A data table is shown. A row is selected and highlighted. The contrast checking score is shown on the bottom left corner at 1:07:1 (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 data table against the full white background. Avoiding aliased/partial pixels.

Guidelines and Standards Used#

Low contrast on interactive elements https://chartability.github.io/POUR-CAF/#lowcontrastoninteractiveelements

Technical Details#

  • Chrome Version 129.0.6668.59 (64-bit)

  • Windows 11 Build 22631.3958

Updated as of: September 18th, 2024