For this ticket, we're going to focus on our site's accessibility. This is ESSENTIAL work. Thanks so much for looking into it!
To audit the accessibility of webpages, you can use tools like Lighthouse or Axe (in the Google Chrome dev tools).
You can manually check color contrast by using inspect element on The Daily's various webpages (focusing on the repeated elements), collecting the hex codes of the colors that are used and running tests here: https://webaim.org/resources/contrastchecker/
Here's an example of how you can identify the text/background colors:
And here's an example of running them through the webaim test:
Clearly we need to make changes here!
If you could take a screenshot of each set of test results (like in the second screenshot above) and write a brief note about where you found the colors that were tested (for the example above, "donate button in top banner"), that would be amazing! This will help us figure out if/where we should change the text and background colors to improve accessibility.
While you're doing this, please feel free to experiment with the palette used on different Daily website components. You can take screenshots of any changes you make directly with the Chrome dev tools (just lmk if you haven't done this before!) and/or submit a branch on GitHub for review if there is anything that you think we should consider changing. Of course, we'll want to make sure any changes / additions to the palette pass the same color contrast tests that are the focus of this ticket.
Please don't hesitate to reach out with any questions or concerns. And have fun!
For this ticket, we're going to focus on our site's accessibility. This is ESSENTIAL work. Thanks so much for looking into it!
To audit the accessibility of webpages, you can use tools like Lighthouse or Axe (in the Google Chrome dev tools).
You can manually check color contrast by using inspect element on The Daily's various webpages (focusing on the repeated elements), collecting the hex codes of the colors that are used and running tests here: https://webaim.org/resources/contrastchecker/
Here's an example of how you can identify the text/background colors:
And here's an example of running them through the webaim test:
Clearly we need to make changes here!
If you could take a screenshot of each set of test results (like in the second screenshot above) and write a brief note about where you found the colors that were tested (for the example above, "donate button in top banner"), that would be amazing! This will help us figure out if/where we should change the text and background colors to improve accessibility.
While you're doing this, please feel free to experiment with the palette used on different Daily website components. You can take screenshots of any changes you make directly with the Chrome dev tools (just lmk if you haven't done this before!) and/or submit a branch on GitHub for review if there is anything that you think we should consider changing. Of course, we'll want to make sure any changes / additions to the palette pass the same color contrast tests that are the focus of this ticket.
Please don't hesitate to reach out with any questions or concerns. And have fun!