How to reformulate the UI of the radio and checkbox?

If we analyze the semantics of the names "check-box" and "radio-button" we will see the following:

• Check-box. From the English box ( box ) check / mark ( check ). The traditional idea of this type of component is that it is literally a box (a square) that can be scratched / marked to indicate the selection of an item.
• Radio button. From the English button ( button ) radial (radio). The word "radial" may be little known, but it has the same root as " dial " and in the dictionary it is referred to as "relative to radius". It means something that circulates, or that leads from one point to another crossing something (have you ever heard of Radial Leste Avenue here in São Paulo?). The component has this name because, although it also allows selection of items, the items are mutually exclusive, so that selecting a new item automatically undoes a previous selection. In fact, the name comes from radio, because in the old days the automotive radios had physical buttons for tuning, and by pressing one of them the previous pressed was released.

But it has some problems (at least in this implementation). Firstly, there is a very low color contrast between selected / non-selected states, which would be particularly severe in low-light environments (something relatively common for mobile users). They also do not use the convention already widely established in human-computer interaction (square is for individual marking, circle for group selection), causing users to have to relearn the convention used.

However, the most relevant problem is that these components do not contain sensory indications ( affordances ) about what they do and / or how they can be used. In a traditional computer system where the mouse is used, click is the most common affordance. The first thing a doubting user will do is try to click on an object. Similarly, in a mobile computing system, the most direct affordance is touch with the fingers, and the first thing to do is try to touch the object. Eventually the user will learn how it works interacting, but an empty square or circle has a visual affordance that already indicates that it may perhaps be filled. It lacks this kind of affordance on objects, and so users have the initial difficulty of differentiating them from mere buttons.

One solution to this particular problem would be to add an empty area, to give the impression that it can be filled, or even just to use a mark-up symbology (the traditional check-list scribble) to start the item in fact selected.

For example, you can use the :after pseudo element to include any of these symbols that remember a "tag", such as: ✅. Increasing the color contrast between marked and unchecked options is also important, as I would highlight them in many cases (and especially in relation to color-blind users). Example implementation:

.btn        { background: #ccc !important; border: none !important }
.btn.active { background: #40d47e !important }
.btn.active:after { content: '✅'; color: #333 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><divclass="text-center">
  <h3>Não sei se todos estão ativados ou desativados</h3>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="checkbox" autocomplete="off" checked>Android
    </label>
    <label class="btn btn-primary active">
      <input type="checkbox" autocomplete="off">Windows
    </label>
    <label class="btn btn-primary active">
      <input type="checkbox" autocomplete="off">iOS
    </label>
  </div>
  <br>
  <h3>Não sei se esta selecionado dois e um não esta  selecionado</h3>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" name="options" id="option1" autocomplete="off" checked>Android
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option2" autocomplete="off">Windows
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option3" autocomplete="off">iOS
    </label>
  </div>
</div>

Still, it would be important to visually differentiate the component that allows an individual brand (the check-box) of the one that allows multiple brands. It could be left to the user to figure out this by interacting (which is not usually a serious problem, since the choice is not usually taken right away), but any indication is helpful.

An alternative is to make the selected buttons also sink, and on the radio button always have one of them initially selected (that is, sunk). This same alternative can be implemented only with the brand, always making one already get selected. Intuitively the user will realize the difference because the check box with several items can start with all deselected and the radio button does not. Or you can, if you have drawing skills, change the shape of the buttons to make them stand out (more circular, for example) and thus establish a convention of their own.