Kontrast barev podle WCAG

Kontrastní poměr textu a pozadí podle WCAG 2.2 (AA, AAA) a APCA pro barvy v libovolném CSS zápisu, s náhledem a návrhem vyhovující barvy. Anglicky color contrast checker.

Vše se počítá přímo v tomto prohlížeči — žádná data nikam neodcházejí.

Barvy

Obě pole berou jakýkoli zápis barvy z CSS: #rgb, #rrggbbaa, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(), color-mix(), relativní barvy, systémové barvy i názvy jako rebeccapurple.

#ffffff · relativní jas 1,000

#6b7280 · relativní jas 0,167

Kontrastní poměr

4,83 : 1AA — vyhovuje pro běžný text, AAA pro velký
Kritérium WCAG 2.2MinimumVýsledek
Běžný text, úroveň AA4,5 : 1✓ vyhovuje
Velký text, úroveň AA3 : 1✓ vyhovuje
Běžný text, úroveň AAA7 : 1✗ nevyhovuje
Velký text, úroveň AAA4,5 : 1✓ vyhovuje
Ikony, rámečky a ovládací prvky (1.4.11)3 : 1✓ vyhovuje
APCA (návrh pro WCAG 3, orientačně)Lc 74běžný text, ne dlouhé odstavce

Velký text je od 18 bodů (24 px), nebo tučný od 14 bodů (asi 18,7 px). Kritérium 1.4.11 platí pro ikony, rámečky polí a další grafiku, kterou je potřeba rozpoznat.

Náhled

Velký text: Příliš žluťoučký kůň

Běžný text odstavce. Kontrast mezi písmem a pozadím rozhoduje o tom, jestli text přečte i člověk se slabším zrakem, na slunci nebo na levném displeji.

Drobné písmo: poznámky pod čarou, popisky a patičky.

Tlačítko

Nejbližší vyhovující barvy

Stejný odstín, změněná jen světlost. Kliknutím barvu použiješ.

Jak použít: Kontrast barev podle WCAG

Kontrola kontrastu spočítá poměr jasu textu a pozadí podle WCAG 2.2 a porovná ho s limity pro úrovně AA a AAA. Obě barvy můžeš zadat v jakémkoli zápisu z CSS, od #fff přes rgba() a hsla() po oklch(), color-mix() nebo systémové barvy. Průhledné barvy nástroj správně smíchá s tím, co je pod nimi.

  1. Do pole Pozadí a Barva textu vlož barvy tak, jak je máš v CSS, nebo je vyber v poli Výběr.
  2. Přečti kontrastní poměr a v tabulce zjisti, pro jaký text a úroveň barvy vyhovují.
  3. Když nevyhovují, klikni na některou z nejbližších vyhovujících barev; odkaz na výsledek zůstane v adrese stránky.

Časté chyby a tipy

Jaký poměr stačí
Úroveň AA, kterou vyžaduje většina předpisů včetně zákona o přístupnosti, chce 4,5 : 1 pro běžný text a 3 : 1 pro velký text, ikony a rámečky polí.
Průhledné pozadí
U poloprůhledného pozadí záleží na tom, co je pod ním. Nastav podklad a zkontroluj i rozsah, který nástroj vypíše pro nejhorší případ.
APCA je jen orientační
Hodnota Lc podle APCA lépe odpovídá vnímání tmavých barev, ale zatím není závazná. Pro audit se pořád počítá poměr podle WCAG 2.2.

Nástroj je zdarma a běží celý v tvém prohlížeči — vložená data se nikam neodesílají ani neukládají.

Převod barev HEX, RGB, HSL a OKLCH →

Další nástroje v kategorii Web a ladění

  • JWT dekodér a ověření podpisu Dekódování JWT tokenu, kontrola platnosti (exp, nbf, iat) a ověření podpisu.
  • Tester regulárních výrazů Tester regexů pro JavaScript, PHP, Python, Go, .NET, Javu i Rust: shody, vysvětlení, mapa výrazu, náhrada, testy a hotový kód.
  • Kontrola a vyčištění SVG Kontrola SVG na skripty, zakódované stránky v Base64, vložené soubory, phishingové formuláře a externí zdroje a jejich bezpečné odstranění.
  • Validátor XML feedu pro Heureku a Zboží.cz Kontrola produktového XML feedu podle specifikace Heureka.cz a Zboží.cz: povinné elementy, formát ceny, dostupnosti a EAN, kódy dopravců, duplicitní ITEM_ID a jmenný prostor.
  • Náhled HTML a CSS Bezpečný náhled HTML a CSS v izolovaném rámu s výběrem šířky zařízení.
  • Porovnání dvou textů (diff) Porovnání dvou textů po řádcích, slovech nebo znacích, včetně unified diff.
  • Náhled Markdownu Živý náhled Markdownu (GitHub Flavored) s bezpečným HTML výstupem.
  • Převodník barev (HEX, RGB, HSL, OKLCH) Převod barev mezi HEX, RGB, HSL, HWB, OKLCH a Lab s kontrastem podle WCAG.
  • Vysvětlení cron výrazu Popis cron výrazu česky, výpis dalších spuštění a převod na crontab, systemd timer, launchd (macOS) a Plánovač úloh Windows.
  • Dekodér certifikátů X.509 Rozbor certifikátů X.509: subjekt, platnost, klíč, alternativní názvy, rozšíření a otisky.
  • Porovnání XML Strukturní porovnání dvou XML dokumentů s cestou ke každé změně.
  • Porovnání JSON Sémantické porovnání dvou JSON dokumentů bez ohledu na pořadí klíčů.
  • IP a CIDR kalkulačka Rozbor IPv4 a IPv6 adres a sítí: maska, rozsah hostitelů, broadcast, typ adresy a kontrola příslušnosti.
  • Rozbor řetězce User-Agent Rozpoznání prohlížeče, jádra, operačního systému a zařízení z řetězce User-Agent.
  • Rozbor e-mailových hlaviček Rozbor hlaviček e-mailu: odesílatel, předmět, datum, cesta zprávy přes servery (Received) a všechny hlavičky.
  • ASN.1 / DER dekodér Výpis struktury ASN.1 DER z PEM, Base64 nebo Hex: typy, OID se jmény, vnořené struktury (certifikáty, klíče).
  • Kalkulačka specificity CSS Výpočet specificity CSS selektorů včetně :is(), :not(), :has() a :where(), barevný rozbor a seřazení podle síly.
  • Kódy kláves v JavaScriptu Stiskni klávesu a uvidíš event.key, event.code, keyCode a location, s ukázkou obsluhy a tabulkou kódů kláves.
  • Porovnání hodnot v JavaScriptu (== a ===) Tabulka, které hodnoty se v JavaScriptu rovnají podle ==, === a Object.is(), s vysvětlením převodu typů krok po kroku.
  • Responzivní logo Jak udělat logo, které se na užší obrazovce zjednoduší: živá ukázka, postup a hotový kód s container query, <picture> nebo SVG spritem.