Kolory: kontrast, paleta i gradient
Kontrast WCAG z progami AA i AAA, dominujące kolory z obrazu i gradient CSS z klasą Tailwind.
- Kategoria
- Grafika
- Cena
- bezpłatne
Uruchamiamy narzędzie...
Kontrast WCAG: jak użyć w trzech krokach
Narzędzie w schemacie, z przykładem z tej strony. Numer kroku stoi tam, gdzie go wykonujesz: w polach, przy wyniku albo poza narzędziem.
Wpisz kolor tekstu i tła.
Odczytaj współczynnik kontrastu i progi WCAG.
Skopiuj najbliższy kolor, który przechodzi.
#7c8599 na białym tle, krok po kroku
Kolory z przykładu policzone tą samą funkcją co w narzędziu, według wzoru WCAG. Wynik obcinamy do dwóch miejsc, bez zaokrąglania w górę.
Wpisujesz
- Tekst
- #7c8599
- Tło
- #ffffff
Jasność względna
- Tekst
- 0,2336
- Tło
- 1
Każdy kolor dostaje jasność od 0 dla czerni do 1 dla bieli, z wagami kanałów dla oka.
Współczynnik
- Kontrast
- 3,70:1
Jaśniejszy plus 0,05 dzielony przez ciemniejszy plus 0,05.
Progi WCAG
- Zwykły tekst, AA
- nie przechodzi (4,5:1)
- Duży tekst, AA
- przechodzi (3:1)
Duży tekst to od 24 px zwykłą czcionką albo od około 18,7 px pogrubioną.
Najbliższy kolor tekstu, który przechodzi
- AA (4,5:1):
#6e7688 - AAA (7:1):
#535967
Pytania
Powiązane narzędzia
Każda zakładka narzędzia rozwiązuje jedno zadanie. Jeśli to samo ma się dziać automatycznie w Twoim bocie, serwerze albo systemie, zbudujemy to.
Brakuje narzędzia, którego potrzebujesz?
Napisz, co chcesz liczyć albo generować. Odpowiemy, czy wystarczy narzędzie, czy lepsza będzie integracja w Twoim systemie.