Színkontraszt-ellenőrző

Teszteld a kontrasztarányt az előtér és a háttérszínek között a hozzáférhetőség biztosítása érdekében.

Ellenőrizd a színeidet

Teszteld a színkombinációkat, hogy megfeleljenek a WCAG hozzáférhetőségi szabványainak a szöveg olvashatósága érdekében.

6.18 az 1-hez
Kontraszt
AA
Szöveg eredménye
Jó

Összehasonlítva: #000000 a #2596BE háttéren

Szöveg

16px, Normál (400)

Normál szövegnek számít.

  • AA (WCAG 1.4.3): legalább 4.5:1

    Megfelel
  • AAA (WCAG 1.4.6): legalább 7:1

    Még 0.82 szükséges

    Nem felel meg

UI elemek és grafikák

Ikonok, mezők keretei, fókuszjelölők és az interfész használatához látható részek.

  • AA (WCAG 1.4.11): legalább 3:1

    Megfelel
6.18 az 1-hez. Szöveg: megfelel AA, nem felel meg AAA. Felhasználói felület elemei: megfelel.
Hogyan történik az ellenőrzés
Összehasonlított színek (keverés után)
Szöveg: #000000, háttér: #2596BE
Relatív fényesség
Szöveg 0.0000, háttér 0.2592
Képlet
(L1 + 0.05) / (L2 + 0.05) ahol L1 a világosabb szín relatív fényessége, L2 pedig a sötétebb színé.
Pontos arány
6.1847 az 1-hez, a megjelenített érték 6.18 az 1-hez. A megjelenített értéket levágjuk, nem kerekítjük, ezért soha nem tűnik jobbnak a valósnál. A pontos értéket hasonlítjuk össze a követelménnyel.

Szövegméret: 16px, Normál (400)

Normál szövegnek számít. A nagy szöveg legalább 24px (18pt), vagy legalább 18.67px (14pt) ha kövér (700 vagy nagyobb súly). A méretek el vannak vágva, nem kerekítve.

Normál szövegnek számít. A nagy szöveg legalább 24px (18pt), vagy legalább 18.67px (14pt) ha kövér (700 vagy nagyobb súly). A méretek el vannak vágva, nem kerekítve.

Aa
Előnézeti cím

A gyors barna róka átugrik a lusta kutya felett

Kis szöveg példa (12px)

Szöveg
#000000
Háttér
#2596be

WCAG szabványok

AA szint

Minimum kontrasztarány 4.5:1 normál szöveghez és 3:1 nagy szöveghez. A legtöbb weboldalnál követelmény.

AAA szint

Fokozott kontrasztarány 7:1 normál szöveghez és 4.5:1 nagy szöveghez. Ajánlott a legjobb hozzáférhetőség érdekében.

Színkontraszt-ellenőrző

Számítsd ki a szöveg és a háttérszínek kontrasztarányát.

Válassz egy színt a szöveg és a háttér színének meghatározásához a színválasztóval, vagy adj meg egy színt RGB hexadecimális formátumban (pl. #259 vagy #2596BE). A csúszka állításával választhatsz színt. A Webes Tartalom-hozzáférhetőségi Iránymutatások (WCAG) egy konkrét iránymutatást tartalmaznak arra, hogy megállapítsák, olvasható-e a szöveg látó használók számára. Ez a kritérium egy különleges algoritmust használ a színkombinációk összehasonlító arányokra való leképezéséhez. Ezen képlet alkalmazásával a WCAG kimondja, hogy a(z) 4.5:1 színkontraszt arány a szöveg és annak háttere között megfelelő a normál (törzs) szöveghez, és a 18+ pt normál vagy 14+ pt félkövér nagy szövegnek legalább 3:1-es színkontraszt aránya kell, hogy legyen.

Főbb jellemzők

  • Valós idejű kontrasztarány számítás
  • WCAG AA & AAA megfelelőség ellenőrzése
  • HSL csúszkák a finomhangoláshoz
  • Többféle előnézeti formátum

Fejlett eszközök

  • Automatikus színjavítás
  • Szöveg- és háttérminták
  • Színnév felismerés
  • Eredmények exportálása

Gyakran ismételt kérdések

A WCAG AA megfeleléshez a normál szövegnek legalább 4,5:1 kontrasztarány kell, a nagy szövegnek (18pt vagy 14pt félkövér) pedig 3:1.

A WCAG AAA magasabb kontrasztarányt követel: 7:1-et a normál szövegnél és 4,5:1-et a nagy szövegnél, szemben az AA 4,5:1-es és 3:1-es értékeivel.

Használd automatikus javítási funkciónkat, amely a szöveg vagy a háttér színét igazítja a tervezői szándék megőrzésével, vagy állítsd be kézzel a színeket a HSL-csúszkákkal, amelyek vizuális jelzőkkel mutatják az AA/AAA megfeleléshez ideális tartományokat.

A zöld zónák és az AA/AAA jelölések a WCAG-megfeléshez ideális tartományokat mutatják. Az irányjelzések (Világosabbra/Sötétebbre) a jelenlegi színkombinációd alapján segítenek jobb kontraszt felé haladni.

Igen, bármilyen HEX-színkódot megadhatsz, vagy a színválasztóval kiválaszthatod a saját színeidet. Az URL automatikusan frissül, így megoszthatsz konkrét színkombinációkat.