Color contrast accessibility quick fix

[alucernoni]

For an example of how to fill this template out, see this Pull Request.

Description

This code changes the colors of the Chippy message, the search bar, the purchase urgency legend icons, and the "click here", "add item", and "clear" buttons on the List view to meet color contrast accessibility standards. It retains the overall theme of the original, just with starker contrast that works in both light and dark modes. I did not use all of the recommended colors from the accessibility insights, instead using adjacent colors from Tailwind's library in keeping with our theme.

Related Issue

closes #42

Acceptance Criteria

• [ x] Color contrast in Chippy message bubble needs to be above 4.5. Suggested to use background color: #247aab and the original foreground color: #ffffff to meet a contrast ratio of 4.72:1
• [ x] Color contrast in purchase urgency tags need to be above 4.5. Suggested to use background color: #4477b5 and the original foreground color: #ffffff to meet a contrast ratio of 4.61:1.
• [x ] Color contrast in search bar needs to be above 4.5. Suggested to use foreground color: #8caddc and the original background color: #3b3b3b to meet a contrast ratio of 4.87:1.
• [x ] Color contrast in Add Item, Click Here, and Clear buttons needs to be above 4.5. Suggested to use foreground color: #3098ff and the original background color: #282c34 to meet a contrast ratio of 4.71:1.
• [x ] Run accessibility insights extension in both light and dark mode to ensure that the 4.5+ color contrast accessibility standard is being met

Type of Changes

	Type
	🐛 Bug fix
	✨ New feature
✓	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

Before

Light Mode

Dark Mode

After

Light Mode

Dark Mode

Testing Steps / QA Criteria

Download the Chrome Accessibility Insights extension. Click the extension and select the "FastPass" option to see if there are any accessibility issues identified. Then go to your computer's system preferences and toggle your preferences to dark/light mode (whichever was not your default), and repeat the test.

Alternatively, to view the color contrast on each individual element, open up your Developer Tools. Use the pointer to click on each element, and under the "Accessibility" heading, observe that the contrast property is listed as 4.5 or above.

[github-actions]

Visit the preview URL for this PR (updated for commit 28288cc):

https://tcl-56-smart-shopping-li-ffe7d--pr43-color-contrast-ac-plri798i.web.app

_{(expires Fri, 02 Jun 2023 01:26:38 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 9c51cec5927ae3f1253a2134be95c1a07393f9a7}

[drakenguyen4000]

Great job Annemarie! The changes to the color looks good when I tested in dark mode. It's a good addition to accessibility for those who prefer to use the app in dark mode.

[yiremorlans]

This is a great refactor to accommodate our accessibility concerns! Thank you for taking the time to go through each concern and providing a solution!