Contrast Errors | WordPress.org

[ad_1]

Hi @georgebr,

It seems from your screenshot that the only elements that have contrast issues are the checkout field descriptions shown below the fields.

Fluid Checkout does not set the colors for most text on the checkout page and instead the colors are inherited from the theme styles.

To fix these contrast errors you have two options:

A) Ideally, you should set a different color for the field descriptions from your theme settings. Alternatively this can be accomplished with CSS code. If you need or prefer to do it with CSS code, you can use the example code below and tweak it to your needs:

div.woocommerce form .form-row .woocommerce-input-wrapper span.description {
color: black;
}

B) You can remove the gray background from the shipping and billing sections from the plugin settings.

  1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout > Checkout;
  2. Locate the section “Checkout fields”;
  3. Then in the billing address and shipping address options, uncheck the checkboxes “Highlight the billing address section in the checkout form” and “Highlight the shipping address section in the checkout form”see screenshot;
  4. Save your changes.

This will likely increase the contrast ratio between the text and the background potentially fixing the issue.

I’m closing this ticket for now.

Best,
Diego.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer