Sprawdzanie kontrastu kolorów
Sprawdź WCAG kontrast tekstu AA i AAA dla nieprzezroczystych kolorów heksu. Podgląd pary, wymiany kolorów, i zastosować higher-kontrast alternatywy tekstu.
Sprawozdanie dotyczące kontrastu
Color contrast report
Text: #777777 Background: #ffffff Contrast ratio: 4.4781:1
- AA · normal text: Fail (requires 4.5:1)
- AA · large text: Pass (requires 3:1)
- AAA · normal text: Fail (requires 7:1)
- AAA · large text: Fail (requires 4.5:1)
Large text: at least 24 CSS px, or approximately 18.67 CSS px when bold. This checks opaque sRGB text contrast only, not overall accessibility.
Tekst eksportu pozostaje po angielsku; wpisane dane nie są zmieniane.
Nie ma rejestracji. Żadnych kredytów na sztuczną inteligencję. Narzędzie to przypomina wyjście w przeglądarce.
Od pomysłu do czegoś pożytecznego.
- 01
Wprowadź tekst i kolory tła.
- 02
Należy dokonać przeglądu obliczonego współczynnika oraz progów normalności lub dużego tekstu.
- 03
Spróbuj zasugerowany kolor tekstu i eksportuj wynik.
Trochę kontekstu.
Stosunki kontrastowe WCAG formuła relative- luminance dla nieprzezroczystych kolorów sRGB. Zwykły tekst AA wymaga 4,5: 1, a duży tekst AA wymaga 3: 1. Duży tekst oznacza zazwyczaj co najmniej 24 CSS piksele lub mniej więcej 18.67 CSS piksele pogrubione. Stosunek surowca określa wynik przed zaokrągleniem. To jest kontrola kolorów, a nie kontrola dostępności.
Dobre pytania.
Czy mogę wprowadzić przejrzyste kolory?
Nie. Użyj nieprzejrzystych, trzy- lub sześciocyfrowych wartości szesnastocyfrowych. Przed mierzeniem komponować przezroczyste kolory na ich ostatnim tle.
Czy współczynnik przechodzenia oznacza, że moja strona jest dostępna?
Nie. Nawigacja klawiatury, semantyka, koncentracja, czytelne wielkości i inne wymagania nadal wymagają testowania. Narzędzie ocenia tylko tę parę tekstu / tła.