Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #181516
    royer100
    Participant

    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

    #181526
    Skandha
    Keymaster

    @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

    #181740
    royer100
    Participant

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

    #181741
    royer100
    Participant

    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;
    }

    #182661
    Skandha
    Keymaster

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

    Kind Regards,
    Skandha

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘ADA Compliance: Contrast Ratio’ is closed to new replies.