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 moduł sprawdzania kontrastu kolorów
Wprowadź kolory pierwszego planu i tła za pomocą wartości szesnastkowych RGB lub wybierz je bezpośrednio za pomocą Selektora kolorów.
- Dostosuj Alfa, aby zmienić przezroczystość koloru pierwszego planu.
- Użyj suwaka Jasność, aby kolor wyglądał na jaśniejszy lub ciemniejszy.
Nasze narzędzie następnie oblicza współczynnik kontrastu i sprawdza go pod kątem zgodności z wytycznymi WCAG:
- WCAG 2.0, poziom AA
- Co najmniej 4,5:1 w przypadku normalnego tekstu podstawowego
- Co najmniej 3:1 w przypadku dużego tekstu
- WCAG 2.1 (interfejs i grafika)
- Co najmniej 3:1 w przypadku ikon, obramowań i innych elementów interfejsu
- Poziom AAA WCAG
- Co najmniej 7:1 w przypadku zwykłego tekstu
- Co najmniej 4,5:1 w przypadku dużego tekstu
Duży tekst oznacza:
- 14 pkt (około 18,66 piksela) i pogrubienie lub
- 18 pkt (około px) lub większy
Możesz użyć kroplomierza w Próbniku kolorów, aby pobrać dokładne kolory z dowolnego miejsca na ekranie.
Jeśli linki wyróżniają się wyłącznie kolorem, skorzystaj z naszego sprawdzacza kontrastu kolorów, aby upewnić się, że spełniają standardy dostępności i są czytelne dla każdego.