<!-- 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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.