cloud-gov/cg-site

Address insufficient contrast accessibility findings in cloud.gov Pages public site

svenaas opened this issue · 3 comments

svenaas commented

Address insufficient contrast accessibility findings in cloud.gov Pages public site:

Links in the side nav in the Documentation section (.usa-sidenav a) have "very low" visual contrast — 4.19:1 — a WCAG failure under AA or AAA.

svenaas commented

Contrast errors found:

  1. https://cloud.gov/pages/documentation/
  2. https://cloud.gov/pages/documentation/why-use-pages/
  3. https://cloud.gov/pages/documentation/adding-users/
  4. https://cloud.gov/pages/documentation/customer-responsibilities/
  5. https://cloud.gov/pages/documentation/sandbox/
  6. https://cloud.gov/pages/documentation/21st-century-idea/
  7. https://cloud.gov/pages/documentation/getting-started-with-jekyll/
  8. https://cloud.gov/pages/documentation/getting-started-with-netlify-cms/
  9. https://cloud.gov/pages/documentation/included-with-pages/
  10. https://cloud.gov/pages/documentation/instructional-demos/
  11. https://cloud.gov/pages/documentation/previews/
  12. https://cloud.gov/pages/documentation/custom-domains/
  13. https://cloud.gov/pages/documentation/before-you-launch/
  14. https://cloud.gov/pages/documentation/migration-guide/
  15. https://cloud.gov/pages/documentation/forms/
  16. https://cloud.gov/pages/documentation/search/
  17. https://cloud.gov/pages/documentation/templates/
  18. https://cloud.gov/pages/documentation/customization/
  19. https://cloud.gov/pages/documentation/resources/
  20. https://cloud.gov/pages/documentation/content-guide/
  21. https://cloud.gov/pages/documentation/custom-headers/
  22. https://cloud.gov/pages/documentation/federalist-json/
  23. https://cloud.gov/pages/documentation/how-builds-work/
  24. https://cloud.gov/pages/documentation/build-errors/
  25. https://cloud.gov/pages/documentation/env-vars-on-pages-builds/
  26. https://cloud.gov/pages/documentation/cloud-gov/
  27. https://cloud.gov/pages/documentation/node-on-pages/
  28. https://cloud.gov/pages/documentation/rvm-on-pages/
  29. https://cloud.gov/pages/documentation/bundler-on-pages/
  30. https://cloud.gov/pages/documentation/cache-dependencies/
  31. https://cloud.gov/pages/documentation/supported-site-engines/
  32. https://cloud.gov/pages/documentation/large-file-handling/
  33. https://cloud.gov/pages/documentation/renaming-site-repository/
  34. https://cloud.gov/pages/documentation/monorepos-on-pages/
  35. https://cloud.gov/pages/documentation/external-tools-and-resources/
  36. https://cloud.gov/pages/documentation/access-permissions/

All of the above share the same contrast issue with the gray links in the left nav that's displayed in the documentation section (most pages have 36 links with such an issue; the main Documentation page has 35).

  1. https://cloud.gov/pages/features/

“Get in touch” button has very low contrast

38. https://cloud.gov/pages/federalist-migration/ (Deleted in #2299)

“Try it out” button has very low contrast

Scanned; no contrast errors found:

  1. https://cloud.gov/pages/
  2. https://cloud.gov/pages/success-stories/
  3. https://cloud.gov/pages/pricing/
  4. https://cloud.gov/pages/contact/
svenaas commented

The .usa-sidenav a theme color of #171716, would result in a contrast ratio of 17.93:1, which passes WCAG AA/AAA.

But this is being overridden to the much lighter #71767a by a rule on .usa-sidenav a:not(.usa-button):not(.usa-current) that I haven't tracked down yet.

Note: Although I only scanned the Pages section of the site, this issue is not limited to that section. It's also present, for instance, in the Documentation section of the cloud.gov site (e.g. /docs/overview/cloudgov-benefits/).

svenaas commented

Resolved in #2311