<!-- Contraste faible : 1.4:1 -->
<p>
  <button type="button" class="outline-grey">Bouton 1</button>
</p>

<!-- Bon contraste -->
<p>
  <button type="button" class="outline-black">Bouton 2</button>
</p>

<!--
Outil Contrast Finder pour trouver de bons contrastes https://app.contrast-finder.org/ :
> Le critère de succès 1.4.3 du WCAG impose pour le texte un rapport de contraste minimum de 4.5 (et de 3 pour le texte agrandi).
-->
button {
  background-color: #FAF0D7;
  border: #FFD9C0;
  padding: .5rem 1rem;
}

.outline-grey:focus {
  outline: 1px solid #ddd;
}

.outline-black:focus {
  outline: 1px solid #000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.