How to change color of the radio buttons?

NEED WHITE OR LIGHT GREY TO SHOW UP ON DK GREY BACKGROUND.

I'm afraid that it is not possible to do that with the widget you're using.

I wasn't able to target it with CSS so it will change properly. 

This might be possible with regular radio button field if that could work for you:

Let us know if you have any further questions.

Thank you!

What is "regular radio button field"?

Which one am I currently using, and how is it different?

 I hope it is clear to you the choice . buttons must be accompanied by illustrations of the font possibilities.

I have checked your form and notice that you are using Image radio buttons widget. This widget uses an image to display the radio buttons. The widget is also having another option to change the theme to black from the widget wizard.

Please check if that works for you to display on your form.

The regular radio buttons can be added from the Form elements by choosing 'Single choice' field. However, you may not be able to display the images with the options. 

Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help. 

I'm sorry for any inconvenience. Please give me some time. I'll try to work on a solution to your concern and I will get back to you as soon as possible.

To change the color of the text of the Image Radio Buttons widget option, please inject the custom CSS codes below into the Custom CSS tab of the widget.

ul#images_button_container li label {

    color: green !important;

}

And, as for changing the color of the buttons to your preference, please inject the custom CSS codes below to the Custom CSS tab of the widget.

.orange-radio:before {

    content: '' !important;

    left: 3px !important;

    background-color: yellow !important;

    position: absolute !important;

    display: inline-block !important;

    vertical-align: baseline !important;

    margin-right: 4px !important;

    -moz-box-sizing: border-box !important;

    -webkit-box-sizing: border-box !important;

    box-sizing: border-box !important;

    -webkit-border-radius: 50% !important;

    -moz-border-radius: 50% !important;

    border-radius: 50% !important;

    border: 2px solid red !important;

    width: 25px !important;

    height: 25px !important;

    cursor: pointer !important;

    visibility: visible !important;

    top: 5px !important;

    opacity: 0.6 !important;

}

li.checked .orange-radio:after {

    content: '' !important;

    position: absolute !important;

    z-index: 10 !important;

    display: inline-block !important;

    opacity: 0.6 !important;

    top: 10px !important;

    left: 8px !important;

    width: 15px !important;

    height: 15px !important;

    background-color: blue !important;

    -webkit-border-radius: 50% !important;

    -moz-border-radius: 50% !important;

    border-radius: 50% !important;

    cursor: pointer !important;

    visibility: visible !important;

}

.orange-radio {

    background:none !important;

}

Related Guide: How-to-Inject-CSS-Codes-to-Widgets

Please keep the theme of the widget to "Orange".

Below is a screenshot of a clone version of your form after applying the changes stated above.

I hope this helps. If you have other questions or concerns, please do not hesitate to let us know.