contrast of some text insufficient

[stevefaulkner]

example: code in error (tested http://google.com)

pmocntr2 > TABLE > TBODY > TR:nth-of-type(2) > .padi > IMG

Foreground:#999999 Background:#FFFFFF
The contrast ratio is: 2.85:1
Text failed at Level AA
WCAG 2.0 SC 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

[addyosmani]

Thanks for the report @stevefaulkner. Could you let me know if you experience the same when running https://github.com/GoogleChrome/accessibility-developer-tools#command-line-runner? If so, we should file an upstream bug there so we can get it fixed directly in that module.

[gpleiss]

I think we're experiencing something similar on our project - but not sure exactly.

We're trying to test a page of our styleguide. When we test the page with the google accessibility chrome extension, we get the following audit:

However, when we use a11y we get the following audit:

[12:14:23] FAIL An element's ID must be unique in the DOM
  #bird
  #body
  #wing
  #head
  #beak

[12:14:23] FAIL These elements are focusable but either invisible or obscured by another element
  body > .now-hiring.bg-accent-3.pbn > .active

[12:14:23] FAIL The web page should have the content's human language indicated in the markup
  html

[12:14:23] FAIL Images should have an alt attribute
  body > .container.ptl > .content > DIV:nth-of-type(2) > .exampleOutput > .gravatar.gravatar-sm > IMG
  body > .container.ptl > .content > DIV:nth-of-type(2) > .exampleOutput > DIV:nth-of-type(2) > IMG
  body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > .gravatar.gravatar-sm > IMG
  body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > .gravatar.gravatar-sm.mlxl > IMG
  body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > DIV:nth-of-type(3) > IMG

[12:14:23] FAIL The purpose of each link should be clear from the link text
  body > .styleguide-header > .container > .styleguide-logo
  body > .now-hiring.bg-accent-3.pbn > .active
  body > .container.ptl > .content > .codeTable > TABLE > TBODY > TR:nth-of-type(2) > TH > .exampleOutput > .btn.btn-primary
  body > .container.ptl > .content > DIV:nth-of-type(32) > .exampleOutput > .label-removable > .close-btn.fa.fa-close
  body > .container.ptl > .back-to-top

[12:14:23] FAIL Text elements should have a reasonable contrast ratio
  #avatar
  body > .container.ptl > .content > .section-nav > LI > A
  body > .container.ptl > .content > .section-nav > LI:nth-of-type(2) > A
  body > .container.ptl > .content > .section-nav > LI:nth-of-type(3) > A
  #avatar_01_gravatar_small

We also tried using the accessibility developer tools command line runner, and got the same output that we saw with a11y. So it seems to us that the issue is with google's CLI, not a11y. I think we should open a bug upstream.

[gpleiss]

Whoops - sorry, this was unrelated.

The chrome extension was returning more errors and warnings because we were using an out-of-date version of chrome. When we upgraded chrome, a11y and the chrome extension were more in sync. (a11y even caught more things than the chrome extension). Yay!