Improve color contrast for accessibility

[HaSistrunk]

Is your feature request related to a problem? Please describe.

Some elements on the site lack sufficient color contrast between their color and the background color. On the dev instance, I'm seeing this in the:

• navbar header in the contrast between the links and navbar color
• The footer between the white text and orange background
• The gray (color: #9195a2) text used for services and orgs description and information against its white background
• In many of the link background-color choices for the Service Category and Service Eligibility links
• Links in pagination
• The <th> text against its background color in the tables
• The "scroll to see all categories" link on the homepage. I see another issue open about that - if I had a vote, I'd say it isn't a necessary element and could be removed since the browse section is immediately below and doesn't require long scrolling.

Describe the solution you'd like

Adjust those colors to meet the WCAG color contrast criteria. This specifies that text and images of text have a contrast ratio of at least 4:5:1. The ratio can be 3:1 if the text is large. Large means at least 18 point (pt not px) or 14 point bold.

Additional context

There are a lot of nice tools that will automatically check color contrast or test color combos for accessibility. Running automated checks on the site using a tool like WAVE, SiteImprove, or Accessibility Insights for Web can help id this and other issues.

This accessibility guideline is specified in WCAG 2.x Level AA (SC 1.4.3).

[d9it]

The menu color & the footer color is dynamic from admin.

[d9it]

Change color contrast from the admin side. Below is the link
https://nimb.ws/HXyN8r
Let me know if you have any doubts.

[HaSistrunk]

Thanks @d9it! Good call and thanks for the link. There are just a few things that don't seem to be dynamic from admin that I'm seeing with contrast issues. I've described below with some screenshots if that's useful:

1. The gray (color: #9195a2) text used for services and orgs description and information against its white background. An example is the description text for this resource:

2. Many of the background colors for the Service Category and Service Eligibility links. For example: Housing, Homeless, Men/Boys, Ages 18+, DC Resident, Care, Legal, Immigrants, Advocacy and Legal Aid... etc. all can be tough to read. This is a nice resource to generate a lot of color-safe colors if it's useful:http://colorsafe.co/
   
   
   

[d9it]

The button background is managed from the admin side.