Kontrola kontrastu WCAG AA i AAA

Sprawdź kontrast kolorów zgodnie z WCAG 2.2 AA i AAA, obejrzyj różne rozmiary tekstu i znajdź dostępne alternatywy kolorystyczne.

Najedź na pole lub je zaznacz, aby wyświetlić pomoc. Naciśnij Escape, aby zamknąć.

Pierwszy planTłoNieprzezroczysta baza

Użyj HEX, RGB, RGBA lub HSL. Przezroczyste kolory są składane na nieprzezroczystej bazie.

5.84:1

Progi używają współczynnika o pełnej precyzji, nigdy zaokrąglonej wartości wyświetlanej.

WCAG 2.2
Poziom	Użyj	SC	Minimum	Wynik
AA	Zwykły tekst	1.4.3	4.5:1	Spełnione
AA	Duży tekst	1.4.3	3:1	Spełnione
AAA	Zwykły tekst	1.4.6	7:1	Niespełnione
AAA	Duży tekst	1.4.6	4.5:1	Spełnione
AA	Elementy interfejsu i grafika	1.4.11	3:1	Spełnione

Tekst podgląduRozmiar czcionki (px CSS)Pogrubienie

Aa — fiokit.

Zwykły tekst: AA ✓ · AAA ✗

Duży tekst: co najmniej 24 px CSS lub 18,67 px CSS z pogrubieniem (14 pt).

Cel proponowanego koloru pierwszego planuRaport

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Zwykły tekst (SC 1.4.3): PASS — 4.5:1
AA Duży tekst (SC 1.4.3): PASS — 3:1
AAA Zwykły tekst (SC 1.4.6): FAIL — 7:1
AAA Duży tekst (SC 1.4.6): PASS — 4.5:1
AA Elementy interfejsu i grafika (SC 1.4.11): PASS — 3:1

Sprawdzane są pary kolorów, nie pełna zgodność z WCAG. Osobno oceń sąsiednie kolory, stany interakcji i rzeczywistą treść.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Jak to działa

Ustaw pierwszy plan, tło i nieprzezroczystą bazę. Wyniki AA i AAA aktualizują się natychmiast. Wypróbuj rozmiar i pogrubienie, zastosuj proponowany kolor lub pobierz raport.

Praktyczny przykład

Kolory

#155bdf

Częste pytania

Czy mój tekst jest wysyłany na serwer?

Nie. Treść jest przetwarzana w tej przeglądarce. Nie jest wysyłana na serwer ani zapisywana.

Co warto wiedzieć o Kontrola kontrastu WCAG AA i AAA?

Osobno pokazuje progi dla tekstu i elementów nietekstowych. Ta kontrola kolorów nie certyfikuje pełnej zgodności z WCAG.