[royer100]

We’ve been told the search box on our website using Catch Responsive theme doesn’t meet ADA compliance for contrast ratio because the text in the box is too light on the search box background color. I can’t find anywhere in the theme settings to change either the search box colors or the color of the default text in the search box. Is this possible? Or do I need to go into the CSS? What would the CSS tag be for these elements? Thank you! website: ci3t.org

[Skandha]

@royer100: To have the option to change colors from the customizer you will need to upgrade to pro version of the theme. You can check out the additional-features available in pro version of the theme.

If you want to do it using Additional CSS
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
/* To change the background color of the search box */

#masthead .search-field {
    background-color: #fff;
}

You can change the color according to your choice.
Let me know if this is what you want!
Kind Regards,
Skandha

[royer100]

Thank you so much, Skandha! Both are perfect options and I was able to customize to get the contrast ratio within compliance! Thank you!

[royer100]

One other thing we were told by the evaluator that wasn’t in compliance for people with disabilities was that the main header image didn’t have alt text. I try to always add alt text to all images, but in the appearance settings where the image is set there doesn’t appear to be a place to add alt text. I added it when the picture was uploaded to Media, but it’s not showing up when displayed on pages (www.ci3t.org). In the CSS I don’t see anything preventing alt text… Is there a way to ‘turn on’ alt text for the header image? Thank you! I search the forum for similar but couldn’t find anything this specific.

#header-featured-image,
.wp-custom-header {
clear: both;
display: block;
line-height: 0;
width: 100%;
text-align: center;
}

[Skandha]

@royer100: Hello there,
You have been replied to here.

Kind Regards,
Skandha

[Author]

Posts