title: Overwrite custom default color settings of browser
body: <p>I want to make a website more accessible by considering user with high contrast mode (or maybe just dark mode).
  Now I have a problem with custom radio buttons which are just HTML elements that have a round border: when the user  has set the default background color of his browser to black, the background-color of my elements is also black, making it look like a checked option, even though I set the background-color of this elements to white.</p>
  <p>To prevent this I made the white border thicker, so it looks like a white background. But it also creates the problem, that sometimes there is a tiny black dot in the middle of my buttons at some zoom-levels or resolutions.</p>
  <p>Is there any way to prevent the browser from overwriting the background-color I declared in my CSS?
  Is there anything I missed out on like an attribute that prevents this behaviour?</p>
  <p>I could also replace this elements or implement them in a different way, but at this point i am just curious if there isn't any simple solution to that.</p>
  <p>The style of my radio buttons looks like this:</p>
  <pre><code>input.check + label:before {
      display: inline-block;
      content: &quot;&quot;;
      width: 1rem;
      height: 1rem;
      background: #fefefe;
      border: 0.2rem solid #fefefe;
      border-radius: 50%;
      position: absolute;
      left: -1rem;
  }
  
  input.check:checked + label:before {
      background: #000000;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/hScNQ.png" rel="nofollow noreferrer">Here is a link to a picture of my radio when checked / or default black background-color</a></p>
  <p>I make the 'checked' look of my radio button by setting the background-color to black - like the browser does in this case.</p>
  <p><strong>Edit</strong></p>
  <p>So far there are good answers for improving the accessability of custom radio buttons.
  To be a little bit more specific on my problem:</p>
  <p>I tested the page in Firefox with the following color settings
  <a href="https://i.stack.imgur.com/tYdB4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tYdB4.png" alt="color settings in firefox" /></a></p>
  <p>But this seems to overwrite every background-color no matter what you specified for each element. Is there a way to make an exception for this overwriting?</p>