accent-colorは継承するため、:rootに指定すると、チェックボックス・ラジオボタン・<input type="range">・<progress>の色がまとめて変わります。 部品を隠さないため、キーボードでも操作できます。

:root {
  accent-color: #0a7d5a;
}

<input type="checkbox" id="agree" />
<label for="agree">利用規約に同意する</label>

inputをdisplay: noneで隠し、labelの中のspanで枠とチェックの印を描き直していました。 inputが隠れているため、Tabキーで移動できず、キーボードでは操作できません。

.checkbox {
  display: none;
}

.checkbox-icon {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 2px solid #767676;
  border-radius: 3px;
  box-sizing: border-box;
  vertical-align: -3px;
}

.checkbox:checked + label .checkbox-icon {
  border-color: #0a7d5a;
  background-color: #0a7d5a;
}

.checkbox:checked + label .checkbox-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

<input type="checkbox" id="agree" class="checkbox" />
<label for="agree"><span class="checkbox-icon"></span>利用規約に同意する</label>