1. Zadejte barvu textu
Zadejte kód barvy ve formátu HEX, RGB nebo HSL – nebo vyberte barvu z color pickeru.
Kontrola kontrastu a čitelnosti barev
Zadejte barvu textu a pozadí a nástroj ukáže, zda je kontrast dostatečný. Výpočty jsou založeny na mezinárodním standardu přístupnosti WCAG 2.1.
Kontrastní poměr
21.00 : 1
Běžný text
AA (min. 4,5:1)AAA (min. 7:1)
Ukázkový text kontrastu WCAG 2.1
Velký / tučný text
AA (min. 3:1)AAA (min. 4,5:1)
Ukázkový text kontrastu WCAG 2.1
Ikona
AA (min. 3:1)
Proč je čitelnost barev důležitá?
Čitelnost je rozdíl jasu mezi barvou textu a barvou pozadí. Čím větší rozdíl, tím snáze se text čte. Příliš nízký kontrast ztěžuje čtení obsahu – zejména pro osoby se zrakovým postižením, starší lidi nebo v obtížných světelných podmínkách.
Podle Světové zdravotnické organizace (WHO) má přibližně 2,2 miliardy lidí na světě nějakou formu zrakového postižení.
Nástroj vypočítá poměr kontrastu pomocí vzorce definovaného v WCAG 2.1 – mezinárodních pokynech pro digitální přístupnost.
Jak použít kontrolu kontrastu barev
Kontrola čitelnosti zabere jen pár sekund:
2. Zadejte barvu pozadí
Zadejte barvu pozadí, na kterém bude text zobrazen.3. Přečtěte si výsledky
Nástroj vypočítá poměr kontrastu a ukáže, zda barvy splňují požadavky WCAG pro běžný text, velký text a ikony.4. Upravte barvy
Pokud je kontrast příliš nízký, funkce Match automaticky navrhne variantu barvy, která splňuje zvolený práh.
Poměr kontrastu
8.59:1
Běžný text
AA (min. 4.5:1)AAA (min. 7:1)
Jak interpretovat výsledky testu čitelnosti
Po zadání barev nástroj zobrazí výsledky ve třech sekcích:
- Běžný text – vyžaduje kontrast 4.5:1 (AA) nebo 7:1 (AAA). Platí pro text pod 18pt (24px) nebo pod 14pt bold.
- Velký text / bold – vyžaduje kontrast 3:1 (AA) nebo 4.5:1 (AAA). Platí pro nadpisy, tlačítka a zvýrazněný text.
- Ikony – vyžaduje kontrast 3:1 (AA). Platí pro ikony a grafické UI prvky nesoucí informaci.
Zelený indikátor znamená splnění požadavku. Červený indikátor znamená příliš nízký kontrast, který je třeba opravit.
Co znamenají úrovně AA a AAA ve standardu WCAG?
| Funkcja | Úroveň AA (minimum) | Úroveň AAA (rozšířená) |
|---|---|---|
| Běžný text – min. 4.5:1 | ||
| Běžný text – min. 7:1 | ||
| Velký text / bold – min. 3:1 | ||
| Velký text / bold – min. 4.5:1 | ||
| Ikony a UI prvky – min. 3:1 | ||
| Vyžadováno zákonem (směrnice EU) | ||
| Doporučeno pro hlavní obsah |
Úroveň AA (minimum)
- Běžný text – min. 4.5:1
- Běžný text – min. 7:1
- Velký text / bold – min. 3:1
- Velký text / bold – min. 4.5:1
- Ikony a UI prvky – min. 3:1
- Vyžadováno zákonem (směrnice EU)
- Doporučeno pro hlavní obsah
Úroveň AAA (rozšířená)
- Běžný text – min. 4.5:1
- Běžný text – min. 7:1
- Velký text / bold – min. 3:1
- Velký text / bold – min. 4.5:1
- Ikony a UI prvky – min. 3:1
- Vyžadováno zákonem (směrnice EU)
- Doporučeno pro hlavní obsah
Často kladené otázky o kontrole kontrastu barev
Objevte další bezplatné nástroje
Konvertor JPG/PNG na WebP
Zmenšete velikost obrázků bez ztráty kvality. Převeďte JPG a PNG do WebP a zrychlete svůj web.
Editor obrázků
Připravte ideální ořez pro sociální sítě nebo svůj web. Vyberte přednastavený formát nebo zadejte vlastní rozměry.
Generátor favicon
Z jednoho obrázku vygenerujte favicon.ico a PNG ikony v souladu s požadavky prohlížečů a Lighthouse.
Kontrola meta titulku a popisu
Zkontrolujte počet znaků a zobrazte si náhled stránky v Google. Vyhněte se oříznutým titulkům a popisům ve výsledcích vyhledávání.
Počítadlo slov a znaků
Zkontrolujte délku textu a vyhodnotíte, zda se hodí pro hlavní stránku, stránku služeb, článek na blog nebo popis produktu.
Generátor podpisu e-mailu
Vytvořte profesionální e-mailový podpis za pár minut. Zkopírujte hotový HTML kód do Gmailu nebo Outlooku.
Kontrola kontrastu barev
Zkontrolujte, zda jsou barvy textu a pozadí čitelné. Nástroj vypočítá kontrast podle WCAG a pomůže vybrat správnou barvu.
Extraktor barev z obrázku
Nahrajte fotografii nebo logo a nástroj extrahuje dominantní barvy. Zkopírujte vygenerované kódy barev jedním kliknutím.
Generátor barevných palet
Vyberte jednu barvu a vygenerujte 9 palet: monochromatickou, komplementární, triádickou a další.
Generátor QR kódu zdarma
Vytvořte QR kód pro web, vCard, menu nebo leták. Export do PNG a SVG, bez přihlášení, bez limitů.