Kontrast WCAG: współczynnik kontrastu dwóch kolorów

Kalkulator współczynnika kontrastu

Kolory podaj jako wartość szesnastkową, na przykład #1C5D4F, albo wybierz je z palety przeglądarki.

Kolor tekstu (pierwszy plan)

Format #RRGGBB lub #RGB.

Kolor tła

Format #RRGGBB lub #RGB.

Wynik wobec WCAG 2.2

Wymaganie	Minimalny współczynnik	Wynik
AA, zwykły tekst [1]	4,5:1
AA, duży tekst [1]	3:1
AAA, zwykły tekst [2]	7:1
AAA, duży tekst [2]	4,5:1
AA, grafika i elementy interfejsu [3]	3:1

Duży tekst to 18 pt (24 px) i więcej, albo 14 pt (18,66 px) i więcej pogrubiony. [1]

Jak liczony jest współczynnik

Współczynnik kontrastu to (L1 + 0,05) / (L2 + 0,05), gdzie L jest luminancją względną jaśniejszego i ciemniejszego koloru. Wartości mieszczą się od 1:1 (dwa takie same kolory) do 21:1 (czarny na białym). Definicja i wzór pochodzą z WCAG. [7]

Czego narzędzie do kontrastu nie powie

• Tekst na zdjęciu lub gradiencie leży na wielu kolorach. Zmierz najgorsze miejsce, a nie średnią.
• Nieaktywne elementy sterujące i tekst czysto dekoracyjny są wyłączone z 1.4.3. To wyjątek w normie, a nie powód, aby pomijać je w projekcie. [1]
• Stany liczą się osobno: najechanie, fokus i stan aktywny mają własne kolory i własny współczynnik.
• Obramowania pól, ikony i wskaźnik fokusu podlegają 1.4.11 z progiem 3:1, a nie 4,5:1. [3]
• Kolor nigdy nie może być jedynym nośnikiem informacji. Mówi o tym kryterium 1.4.1, a narzędzie do kontrastu tego nie sprawdzi.

WCAG 2.2 i poziom AA

WCAG 2.2 to rekomendacja W3C, która dodaje do WCAG 2.1 dziewięć nowych kryteriów. Poziom AA to ten, który norma EN 301 549 w rozdziale 9 przejmuje z WCAG 2.1. Względem tej normy testuje się w praktyce; sama w sobie nie dowodzi, że strona spełnia wymogi ustawy. [4] [8]

Lista kontrolna WCAG 2.2 AA: kryteria o kontraście i wzroku

• 1.4.3 Kontrast (minimalny): tekst 4,5:1, duży tekst 3:1.
• 1.4.6 Kontrast (wzmocniony) to poziom AAA: 7:1 i 4,5:1.
• 1.4.11 Kontrast elementów nietekstowych: grafika i kontrolki 3:1.
• 1.4.1 Użycie koloru: kolor nigdy nie jest jedynym nośnikiem.
• 1.4.4 Zmiana rozmiaru tekstu: 200 procent bez utraty treści.
• 1.4.12 Odstępy w tekście: odstępy muszą dać się zmienić.
• 2.4.11 Fokus nie jest zasłonięty (nowe w 2.2, poziom AA).
• 2.5.8 Rozmiar celu (minimalny): 24 na 24 px (nowe w 2.2, poziom AA).

Co wnosi WCAG 2.2

Dziewięć nowych kryteriów. Na poziomie AA: 2.4.11 Fokus nie jest zasłonięty (minimalny), 2.5.7 Przeciąganie, 2.5.8 Rozmiar celu (minimalny) i 3.3.8 Dostępne uwierzytelnianie (minimalne). Na poziomie A doszły 3.2.6 Spójna pomoc i 3.3.7 Powtórne wprowadzanie. Kryterium 4.1.1 Parsowanie uznano za nieaktualne. Na poziomie AAA: 2.4.12 Fokus nie jest zasłonięty (rozszerzony), 2.4.13 Wygląd fokusu i 3.3.9 Dostępne uwierzytelnianie (rozszerzone). [5]

WCAG 2.3 nie istnieje

Hasło bywa wyszukiwane, ale wersja 2.3 nigdy się nie ukazała. Aktualnie opublikowaną wersją jest WCAG 2.2. Następna generacja powstaje jako WCAG 3.0 i pozostaje roboczym projektem W3C, a nie standardem, z którego dziś wynikają obowiązki. [6]

Źródła

• [1] W3C: WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum), Level AA.
• [2] W3C: WCAG 2.2, Success Criterion 1.4.6 Contrast (Enhanced), Level AAA.
• [3] W3C: WCAG 2.2, Success Criterion 1.4.11 Non-text Contrast, Level AA.
• [4] W3C: Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation.
• [5] W3C: What's New in WCAG 2.2.
• [6] W3C: WCAG 3 Introduction (W3C Working Draft, not a standard).
• [7] W3C: WCAG 2.2, relative luminance and contrast ratio definitions.
• [8] ETSI EN 301 549 V3.2.1, clause 9 (web), which adopts WCAG 2.1 Level AA.