Accessibility Errors with Default Field Text/Background

  • Resolved Sharon

    (@prettybiddy)


    5 years, 1 month ago

    Hello – I am trying to make this website as Accessible as possible (to special needs people). So the Contact form on this page uses the default field label color and background and this generates ‘low contrast’ errors on the WAVE Accessibility test (https://wave.webaim.org/). So the field labels seem perfectly viewable to me but I guess they are not. What would be the CSS for making the label text black and the form background white? That’s about as high-contrast as you can get. Thank you for any help.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Will Derichsweiler

    (@williamdersh)

    5 years, 1 month ago

    Hi @prettybiddy,

    It looks like there could be a styling conflict between the site theme and the forms. To fix this, please try the following custom CSS snippet:

    div.wpforms-container-full .wpforms-form .wpforms-field-label {

color: #000000 !important;

}

div.wpforms-container-full {

background-color: #ffffff !important;

}

    And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter Sharon

    (@prettybiddy)

    5 years, 1 month ago

    Thank you – that worked. I also changed the color of the “required” star from red to black as WAVE issued a warning about that as well.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Accessibility Errors with Default Field Text/Background’ is closed to new replies.