Va falloir que je factorise les couleurs de la CSS d’ici vu que j’ai une possible palette pour un mode sombre :
:root {
--main-color: #e3e3e3;
--link-color: #ffa9ab;
--main-background: #123451;
--content-background: #1a4b75;
--comment-background: #253d51;
--me-background: #0f2c44;
}
@media (prefers-contrast: more) {
:root {
--link-color: #ffdbdc;
}
}
La compression a un peu terni les couleurs, surtout celle utilisée pour les liens ; une fois appliqué c’est plus contrasté.
D’ailleurs les ratios de contraste sont les suivants :
| Fond | Texte (#e3e3e3) | Lien (#ffa9ab) | Exemple de lien |
|---|---|---|---|
| #123451 | 10,1 | 7 | Exemple de lien |
| #1a4b75 | 7,1 | 5 | Exemple de lien |
| #253d51 | 8,8 | 6,2 | Exemple de lien |
| #0f2c44 | 11,2 | 7,9 | Exemple de lien |
Soit niveau WCAG AA (> 4,5:1) voire AAA (> 7:1) pour toutes les combinaisons.
Pour obtenir un niveau AAA partout il suffit que je change la couleur des liens en #ffdbdc, positionné avec la mediaquery idoine (voir la feuille de style plus haut).