Operacyjny
Zaloguj się / Zarejestruj się
common.you_need_to_be_loggedin_to_add_tool_in_favorites
Kontroler kontrastu kolorów
Reklama
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Wprowadź poniżej kombinacje kolorów, aby przetestować je za pomocą naszego narzędzia do sprawdzania kontrastu kolorów i od razu sprawdzić, czy spełniają standardy dostępności.
Jak działa nasz Kontroler Kontrastu Kolorów
Wprowadź kolory pierwszego i tła za pomocą wartości heksadecimalnych RGB lub wybierz je bezpośrednio za pomocą Color Pickera.
Możesz:
- Reguluj Alpha, aby zmienić przezroczystość koloru pierwszego planu.
- Użyj suwaka Jasności, aby kolor wyglądał na jaśniejszy lub ciemniejszy.
Nasze narzędzie następnie oblicza współczynnik kontrastu i sprawdza go zgodnie z wytycznymi WCAG:
- WCAG 2.0 Poziom AA
- Przynajmniej 4,5:1 dla normalnego tekstu treści
- Przynajmniej 3:1 dla dużego tekstu
- WCAG 2.1 (UI i grafika)
- Przynajmniej 3:1 dla ikon, ramek i innych elementów interfejsu
- Poziom AAA WCAG
- Przynajmniej 7:1 dla normalnego tekstu
- Przynajmniej 4,5:1 dla dużego tekstu
Duży tekst oznacza albo:
- 14 pkt (około 18,66 px) i pogrubione, lub
- 18 pkt (około px) lub więcej
Możesz użyć pipety w Color Pickerze, aby pobrać dokładne kolory z dowolnego miejsca na ekranie. To ułatwia testowanie prawdziwych wzorów, przycisków lub teł.
Aby linki polegały wyłącznie na kolorze, aby się wyróżnić, skorzystaj z naszego narzędzia do sprawdzania kontrastu kolorów, aby upewnić się, że spełniają standardy dostępności i są łatwe do czytania dla wszystkich.