(EDIT #2: A user found that the css in this answer results in hidden checkboxes inside of the Form Editor Interface! That is bad! Please see the answer here for a better rule that will only change the checkboxes on the Form in Edit, View, Print, or New)
(EDIT #1: When I originally wrote this post I did not see that this was using Nintex Forms for Office 365. I'm currently using on-premise, and while I believe that the only difference between the two is custom JavaScript usage, I think that this css only solution should work. I hope. maybe. I suppose we'll know soon enough!)
So using that tutorial that you posted, I was able to successfully change the checkbox into something with a little more contrast in view mode.
Before we get to the css, go on and apply a custom class to your checkbox as shown:
In this instance, my class name is 'custom-checkbox'.
Now you'll add the css code at the top of the css in the Settings menu.
So. Copy this:
.custom-checkbox input {
-webkit-appearance: none;
background-color: #ffffff;
border: 1px solid #7b7b7b;
padding: 5px;
border-radius: 3px;
}
.custom-checkbox input:checked {
background-color: #e9ecee;
color: #99a1a7;
}
.custom-checkbox input:checked:after {
content: '2714';
font-size: 12px;
position: absolute;
top: 2px;
left: 5px;
color: black;
}
And then, paste it here:
That should change things to make the contrast stick out just a little bit more than normal.
This is what it looks like in Edit Mode (checked):
And this is what it looks like in View Mode (unchecked):
If you want to change the look further, you can simple change those color (hex) values to whatever colors you'd like!
I hope this gets you going in the right direction.
Thank you so much for such a prompt fix. I am finishing up this form and if I see any other "checkbox" issues I will let you know, but so far it looks and works great for what we needed.