Współczynnik kontrastu (Contrast Ratio)

Progi WCAG w skrócie

• AA: 4,5:1 tekst zwykły, 3:1 tekst duży i elementy UI (SC 1.4.3, 1.4.11).
• AAA: 7:1 tekst zwykły, 4,5:1 tekst duży (SC 1.4.6).
• Wyjątki: logotypy, tekst dekoracyjny i elementy nieaktywne.

W praktyce

Kontrast trzeba sprawdzać na realnych kombinacjach kolorów — także dla stanów hover, focus i disabled oraz tekstu na obrazach i gradientach. Warto wiedzieć, że WCAG 3 pracuje nad nowym modelem percepcyjnym (APCA), który lepiej odzwierciedla czytelność ciemnych motywów.

Przykład

Na ciemnym tle (#0f0f0f) szary tekst #767676 nie spełnia AA (ok. 3,8:1), a #b3b3b3 już tak (ok. 8,6:1).

.card-caption {
  color: #767676;       /* ~3.8:1 na #0f0f0f */
  background: #0f0f0f;
}

.card-caption {
  color: #b3b3b3;       /* ~8.6:1 na #0f0f0f */
  background: #0f0f0f;
}