# Kontrola barevného kontrastu Porovnejte barvu textu s barvou pozadí podle WCAG 2.2 přímo tady, nebo zadejte adresu stránky a najděte každý text pod minimálním kontrastem, spolu s naměřenými barvami a nejbližší barvou, která vyhovuje. ## Co tento nástroj kontroluje - Poměr WCAG pro libovolné dvě barvy: Kalkulačka používá vzorec relativní svítivosti z definic WCAG 2.2 a ukazuje výsledek pro běžný text, velký text a části rozhraní na úrovních AA a AAA. Běží ve vašem prohlížeči. - Vypočítaná barva, která vyhovuje: Když dvojice nevyhovuje, kalkulačka najde nejbližší barvu textu stejného odstínu, která dosáhne 4.5:1 nebo 7:1, takže v designu změníte co nejméně. - Každý text s nízkým kontrastem na stránce: Sken stránky spustí pravidlo color-contrast z axe-core ve skutečném prohlížeči Chrome a vypíše každý nevyhovující prvek s barvou textu, barvou pozadí, velikostí písma a poměrem. - Seskupeno podle barevných dvojic: Chyby jsou seskupené podle barvy textu a pozadí, protože jedna změna barvy v motivu obvykle opraví každý prvek, který ji používá. - Správný práh pro velký text: Text o velikosti nejméně 24 pixelů, nebo 18,66 pixelu tučně, potřebuje místo 4.5:1 jen 3:1. Sken u každého prvku použije správný práh podle jeho vypočtené velikosti a tloušťky písma. - Co se nepodařilo změřit a proč: Text na obrázcích, barevných přechodech nebo překrývajících se prvcích je uvedený zvlášť i s důvodem, takže přesně víte, co zkontrolovat okem. ## Co zkontrolovat nedokáže - Změřit text na fotografiích, barevných přechodech nebo videu. Software neví, která část obrázku leží za kterým písmenem, proto jsou tyto prvky uvedené k vaší kontrole. - Zkontrolovat stav po najetí myší, při fokusu ani jiné stavy. Sken vidí stránku tak, jak se načte; tyto barvy ověřte v kalkulačce. - Prohledat ikony, ohraničení a formulářová pole na stránce podle WCAG 1.4.11. Kalkulačka ukáže výsledek pro práh 3:1 u každé dvojice, kterou zadáte. - Přečíst text, který je součástí obrázku, například banner s textem vloženým přímo do grafiky. - Otestovat víc než zadanou stránku. Plný bezplatný sken otestuje až pět klíčových stránek. ## Proč na tom záleží Nízký kontrast je nejčastější chybou přístupnosti na webu. Analýza WebAIM z roku 2026, která zahrnula domovské stránky milionu nejnavštěvovanějších webů, našla text s nízkým kontrastem na 83,9 % z nich, v průměru 34 výskytů na stránku. Bledý text se špatně čte lidem se slabým zrakem nebo s poruchou barevného vidění i komukoli, kdo používá telefon na ostrém slunci. Kritérium úspěšnosti 1.4.3 WCAG 2.2 na úrovni AA stanovuje minimum 4.5:1 pro běžný text a 3:1 pro velký text. Patří také k nejlevněji opravitelným problémům: na většině webů způsobuje téměř všechny chyby hrstka barev motivu a jejich změna opraví všechny stránky najednou. ## Jak číst výsledky - Kontrastní poměr: Od 1:1 (dvakrát stejná barva) po 21:1 (černá na bílé). Poměry se zaokrouhlují dolů, takže dvojice s hodnotou 4.49:1 nesplňuje minimum 4.5:1. - Běžný text, AA (4.5:1): Minimum pro text obsahu, odkazy, popisky a text tlačítek podle WCAG 1.4.3. - Velký text, AA (3:1): Pro text o velikosti nejméně 24 pixelů, nebo 18,66 pixelu tučně. WCAG definuje velký text jako 18 bodů, nebo 14 bodů tučně. - AAA (7:1 a 4.5:1): Zvýšená úroveň podle WCAG 1.4.6. Pro shodu s úrovní AA není potřeba, ale pomáhá většímu počtu čtenářů. - Ikony, ohraničení a formulářová pole (3:1): WCAG 1.4.11 požaduje poměr 3:1 vůči sousedním barvám u těch částí ovládacích prvků a grafiky, které lidé potřebují vidět, aby je mohli používat. - Text s nízkým kontrastem: Každý prvek, který sken naměřil pod jeho prahem, se selektorem, barvami, velikostí a poměrem. Rozbalte ho a uvidíte jeho kód a, pokud je k dispozici, snímek obrazovky. - Ke kontrole okem: Text, který axe-core nedokázal změřit, i s důvodem, například s obrázkem nebo barevným přechodem v pozadí. ## Jak opravit nejčastější problémy - Šedý text na bílém pozadí: #767676 je zhruba nejsvětlejší šedá, která na bílé dosáhne 4.5:1 (4.54:1). Světlejší šedé, například #999999 (2.84:1), jsou častou příčinou chyb v patičkách, popiscích, zástupných textech a cenách. - Bílý text na tlačítku v barvě značky: Pokud bílý text na barvě vaší značky nevyhovuje, ztmavte pozadí tlačítka o několik stupňů, nebo použijte tmavý text. Zkontrolujte i barvy po najetí myší a při fokusu, protože bývají světlejší. - Zástupný text ve formulářích: Zástupný text (placeholder) je pořád text a potřebuje 4.5:1. Ještě lepší je dát nad pole viditelný popisek, aby zástupný text nebyl jediným pokynem. - Text na obrázcích a ve sliderech: Umístěte text na jednolité nebo poloprůhledné pozadí, nebo přidejte na obrázek tmavý překryv, a pak zkontrolujte nejsvětlejší část obrázku, která leží za textem. - Štítky slev a drobné písmo: Text v neaktivních ovládacích prvcích je z 1.4.3 vyjmutý, štítky slev, ceny a právní informace drobným písmem však ne. Často jde o nejbledší text na stránkách e-shopu. ## Často kladené otázky ### Jaký kontrastní poměr WCAG vyžaduje? Pro úroveň AA 4.5:1 u běžného textu a 3:1 u velkého textu (kritérium úspěšnosti 1.4.3) a 3:1 u komponent rozhraní a významové grafiky (1.4.11). Úroveň AAA požaduje 7:1 a 4.5:1 (1.4.6). ### Co se považuje za velký text? WCAG definuje velký text jako nejméně 18 bodů, nebo 14 bodů tučně. V pixelech CSS je to zhruba 24px, nebo 18,66px tučně. ### Musí loga splňovat minimální kontrast? Ne. WCAG 1.4.3 vyjímá loga a text, který je součástí loga nebo názvu značky, a také čistě dekorativní text a text v neaktivních ovládacích prvcích. ### Proč sken uvádí text na obrázku ke kontrole? axe-core měří jednolité barvy. Když za textem leží obrázek, barevný přechod nebo jiný prvek, nepozná, které barvy se potkávají, a tak prvek místo hádání nahlásí ke kontrole člověkem. ### Potřebuji kontrast na úrovni AAA? Úroveň AAA není pro shodu s úrovní AA nutná a W3C nedoporučuje vyžadovat AAA pro celé weby. Dosáhnout 7:1 u textu obsahu je přesto dobrá praxe tam, kde to design dovolí. ### Je APCA součástí WCAG? Ne. APCA je jiná metoda výpočtu kontrastu, o které se diskutuje v souvislosti s WCAG 3, jež jsou stále jen návrhem. Shoda se dnes měří poměrem podle WCAG 2, který počítá tento nástroj. ## Zdroje - [W3C: Vysvětlení kritéria úspěšnosti WCAG 2.2 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: Vysvětlení kritéria úspěšnosti 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: Vysvětlení kritéria úspěšnosti 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: Definice relativní svítivosti ve WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: pravidlo color-contrast v axe-core](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)