Kalkulator kontrastu kolorów

Kalkulator kontrastu kolorów

Kontrast to jeden z najważniejszych aspektów dostępności. Odpowiedni stosunek jasności tekstu i tła decyduje o tym, czy treść będzie czytelna dla wszystkich.

Wymagania WCAG 2.1

Duży tekst to co najmniej 24 px lub 18,66 px pogrubiony.

Jak liczymy?

Kontrast wyznacza się ze względnej luminancji kolorów: (L1 + 0,05) ÷ (L2 + 0,05), gdzie L1 to jaśniejszy, a L2 ciemniejszy kolor.

Przykład

Szary #777777 na białym tle ma kontrast około 4,48:1 — ledwo poniżej progu AA dla zwykłego tekstu. Ciemniejszy #595959 daje już ponad 7:1 i spełnia AAA.

Jak działa kalkulator kontrastu?

Kalkulator nie korzysta z gotowej tabeli dopasowanych par kolorów. Dla każdego wpisanego koloru wykonuje obliczenia na bieżąco: najpierw zamienia zapis szesnastkowy na składowe RGB, a następnie wyznacza względną luminancję każdego koloru. Luminancja to miara jasności odbieranej przez oko; nie jest tym samym co prosta średnia składowych RGB, ponieważ ludzkie oko inaczej reaguje na różne długości fal.

Gdy narzędzie ma już luminancję tekstu i tła, ustala, który kolor jest jaśniejszy (L1), a który ciemniejszy (L2). Kontrast oblicza ze wzoru: (L1 + 0,05) ÷ (L2 + 0,05). Wynik jest liczbą niemianowaną, zapisywaną jako stosunek, np. 4,5:1. Stała 0,05 w formule zapobiega dzieleniu przez zero i odpowiada minimalnemu rozproszeniu światła w typowych warunkach.

Na końcu kalkulator porównuje wynik z progami WCAG 2.1: dla zwykłego tekstu AA to 4,5:1, AAA to 7:1, dla dużego tekstu AA to 3:1, a AAA to 4,5:1. Dodatkowo może podpowiedzieć, czy na danym tle lepiej sprawdzi się tekst czarny, czy biały. To podpowiedź oparta wyłącznie na stosunku luminancji, a nie na estetyce projektu.

Przykład krok po kroku: czarny tekst na białym tle

1. Ustawiamy tło na #FFFFFF, czyli biel, a kolor tekstu na #000000, czyli czerń.
2. Dla bieli względna luminancja wynosi 1, a dla czerni 0. To skrajne wartości w skali luminancji WCAG.
3. Jaśniejszym kolorem jest biel, więc L1 = 1. Ciemniejszym jest czerń, więc L2 = 0.
4. Podstawiamy liczby do wzoru: (1 + 0,05) ÷ (0 + 0,05) = 1,05 ÷ 0,05 = 21.
5. Otrzymujemy kontrast 21:1. To najwyższy możliwy wynik w tym wzorze.
6. Wynik spełnia AA (4,5:1) i AAA (7:1) dla zwykłego tekstu, a także progi dla dużego tekstu i elementów interfejsu. Jeśli kalkulator pokazuje niższą wartość, wskazuje zmianę koloru tekstu na czarny lub biały, zależnie od tła.

Progi kontrastu WCAG 2.1 — tabela referencyjna

Praktyczne wskazówki przy sprawdzaniu kontrastu

• Sprawdzaj rzeczywiste tło — jeśli tekst leży na przezroczystym panelu, gradiencie lub zdjęciu, zmierz kolor, który faktycznie znajduje się bezpośrednio pod tekstem.
• Pamiętaj o stanach interaktywnych — osobno oceniaj zwykły, hover, focus, active i disabled. Wskaźnik fokusa powinien być widoczny, a jego kontrast wynosi co najmniej 3:1.
• Nie opieraj komunikatu tylko na kolorze — kontrast poprawia czytelność, ale błąd, sukces czy wymagane pole oznaczaj także tekstem, ikoną lub kształtem.
• Dobierz poziom do roli tekstu — zwykłe akapity traktuj ostrzej niż duże nagłówki; dla zwykłego tekstu w AA potrzebujesz 4,5:1, a w AAA 7:1.
• Testuj na docelowym urządzeniu — ekrany o różnej jasności, powłoce i kalibracji mogą zmieniać odbiór, nawet jeśli wynik liczbowy się nie zmienia.

Ograniczenia kalkulatora kontrastu

• Przezroczystość i gradienty — narzędzie porównuje dwa jednolite kolory. Jeśli tło ma kanał alfa lub płynne przejście, wynik dla wybranego hexa może nie odpowiadać najgorszemu miejscu pod tekstem.
• Obraz lub tekstura pod tekstem — kalkulator nie analizuje zdjęcia ani wzoru. W takim przypadku trzeba sprawdzić kontrast w najbardziej niekorzystnym fragmencie tła.
• Renderowanie czcionki — antyaliasing, grubość kreski, rozstaw liter i jakość wyświetlacza wpływają na czytelność, choć nie zmieniają samego stosunku luminancji.
• Brak pełnego audytu dostępności — narzędzie ocenia tylko kontrast kolorów. Nie sprawdza semantyki HTML, obsługi klawiatury, alternatyw tekstowych ani kolejności nagłówków.

Najczęstsze pytania