website icon indicating copy to clipboard operation
website copied to clipboard

Fix color contrast in search results

Open atsansone opened this issue 1 year ago • 0 comments

From https://buganizer.corp.google.com/issues/337302544

Observed Results

The results links and code numbers do not have enough contrast ratio.

Color contrast of 3.74 (foreground color: #009933, background color: #ffffff, font size: 9.8pt (13px), font weight: normal).

Element has insufficient color contrast of 1.54 (foreground color: #d0d0d2, background color: #ffffff, font size: 10.5pt (14px), font weight: normal).

Expected Results

Ensure that the color contrast for the links should be at least 4.5:1 to be accessible to everyone.

User Impact

Low vision users are affected because they cannot distinguish those links.

Steps to Reproduce

  1. Enabled the color contrast companion tool.
  2. Open the following pages:
    • https://docs.flutter.dev/search?q=devtools
    • https://docs.flutter.dev/cookbook/design/snackbars#interactive-example
  3. Continue the linear navigation using the Tab key.
  4. Observe that the results links colors and code numbers.

GAR Assessment

Flutter Docs

GAR Details

1.14. Is there sufficient color contrast between the text and the background?

Environment Details

Machine: MAC/ChromeBook Browser: Chrome Version 120.0.6099.272 (Official Build) (64-bit) Screen reader: NA. Bug filling time: 15 mins.

atsansone avatar May 08 '24 21:05 atsansone