Test Open Library's Color Contrast

[bpmcneilly]

For this task, we want you to take a look through all of the Open Library content & make sure the text has sufficient color contrast.

Steps

1. Go through each of the pages under the 'Pages to Test' heading
   1. If you can't take on every page, no worries! Just add a comment here & let us know what pages you're reviewing ☺️
2. Using a color contrast tool of your choosing (see the "Resources" heading below) measure the contrast of any new color combination
   1. Generally, the color contrast ratio of text should be 4.5:1 or higher
      1. If you select two colors in your checker, a ratio should be displayed - choosing white (#ffffff) and black (#000000), for instance, will create a contrast ratio of 21.0:1
      2. Some "Large Text" (that's at least 14 Point & Bolt or 18 Point) can be a lower ratio of 3.0:1
3. If any color contrast ratios are too low, please file a bug (or better yet a PR!) related to this image
   1. General bug / PR formatting is available on the main Accessibility Issue: #4202
   2. For contrast issues / PRs, make sure you include what the current contrast ratio is & what you think alternative colors could be (and what those contrast ratios would be)

Resources

• Color contrast tools are available are available in a variety of formats:
  • Firefox includes a color contrast tool from its developer tools
  • Web based contrast tools, such as WebAIM's Color Contrast Checker exist
  • Some desktop apps, such as the Colour Contrast Analyser also exist
• If you have any questions on other color contrast tools, how to interpret results or anything else feel free to the accessibility contact!
  • Contact info is available on the main Accessibility Issue: #4202

Pages to test

• [x] Home
• [x] Subjects
• [x] Individual Subject
• [x] Lists
• [x] Individual List
• [x] Advanced Search
• [x] Search Results
• [x] Search Inside Results
• [x] Book Page
• [x] Help Page
• [x] Library Explorer
• [x] Log In
• [x] Loans
• [x] Want To Read
• [x] Want To Read 'Stats'
• [x] Privacy Settings
• [x] Edit Profile
• [x] Report a Problem
• [x] Recent Changes
• [x] Add a Book

[SaravgiYash]

0 Contrast Errors

• Subjects Page. https://wave.webaim.org/report#/https://openlibrary.org/subjects

• Lists Page. https://wave.webaim.org/report#/https://openlibrary.org/lists

• Library Explorer Page https://wave.webaim.org/report#/https://openlibrary.org/explore

• Login Page https://github.com/internetarchive/openlibrary/issues/4522#issuecomment-775866796

• Help Page https://github.com/internetarchive/openlibrary/issues/4522#issuecomment-775866796

• Want To Read https://wave.webaim.org/report#/https://openlibrary.org/people/yashs911

• Want To Read 'Stats'

• Recent Changes https://wave.webaim.org/report#/https://openlibrary.org/recentchanges

  Fix/Fixed Contrast Issues

• Home Page https://github.com/internetarchive/openlibrary/pull/4538

• Individual Subject Page https://github.com/internetarchive/openlibrary/pull/4558

• Individual List Page https://github.com/internetarchive/openlibrary/pull/4558

• Advanced Search https://github.com/internetarchive/openlibrary/pull/4571 (Red Search)

• Search Results https://github.com/internetarchive/openlibrary/pull/4580

• Search Inside Results https://github.com/internetarchive/openlibrary/pull/4580

• Loans https://github.com/internetarchive/openlibrary/pull/4558

• Privacy Settings https://github.com/internetarchive/openlibrary/pull/4571 (Red Cancel)

• Edit Profile https://github.com/internetarchive/openlibrary/pull/4571 (Red Cancel)

• Report a Problem https://github.com/internetarchive/openlibrary/pull/4571 (Red Cancel)

• Add a Book https://github.com/internetarchive/openlibrary/pull/4571 (Red Cancel)

• Book Page https://github.com/internetarchive/openlibrary/pull/4601

[Sabreen-Parveen]

@bpmcneilly and @Yashs911 I have checked login and Help pages, there are no color contrasts in them. https://wave.webaim.org/report#/https://openlibrary.org/help/faq/about https://wave.webaim.org/report#/https://openlibrary.org/account/login

[SaravgiYash]

0 Contrast Errors

• Subjects Page. https://wave.webaim.org/report#/https://openlibrary.org/subjects
• Lists Page. https://wave.webaim.org/report#/https://openlibrary.org/lists
• Library Explorer Page https://wave.webaim.org/report#/https://openlibrary.org/explore
• Login Page #4522 (comment)
• Help Page #4522 (comment)
• Want To Read https://wave.webaim.org/report#/https://openlibrary.org/people/yashs911
• Want To Read 'Stats'
• Recent Changes https://wave.webaim.org/report#/https://openlibrary.org/recentchanges

Fix/Fixed Contrast Issues

• Home Page #4538
• Individual Subject Page #4558
• Individual List Page #4558
• Advanced Search #4571 (Red Search)
• Search Results #4580
• Search Inside Results #4580
• Loans #4558
• Privacy Settings #4571 (Red Cancel)
• Edit Profile #4571 (Red Cancel)
• Report a Problem #4571 (Red Cancel)
• Add a Book #4571 (Red Cancel)
• Book Page #4601

@bpmcneilly I think we have checked all the mentioned pages 🎉

[bpmcneilly]

@Yashs911 - Thanks to you and @Sabreen-Parveen for all your work on this! I'm reviewing now. I'm going to add a few new accessibility issues soon & may also format things differently to make tracking a little easier. Be on the lookout 😄

[github-actions[bot]]

Assignees removed automatically after 14 days.