I think your logic is flawed. Hit area is not too small if you write the component as you’re supposed to, accessibly with a label which means clicking or tapping the label also ticks and unticks the check-box:

<input type="checkbox" name="vehicle1" value="Bike" id="bike"><label for="bike">bike</label>

Also, if you find check-boxes annoying from a design perspective, put the check-box and its label into a pill. Simples!

Another problem you’re creating with your suggestion, is that you’re solely relying on colour, which is a huge NO-NO in accessibility. To be honest, even as a person with no disabilities I can’t tell which of those “toggle tokens” are on or off half the time, because the colours often don’t convey that info. White background vs green, blue vs white, it’s not as intuitive as you might think.