Nástroj zdarma: Přístupnost

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.

Kalkulačka kontrastu

Zadejte barvu textu a barvu pozadí. Vše se počítá ve vašem prohlížeči.

Takto vypadá běžný text o velikosti 16 pixelů.

Velký text o velikosti 24 pixelů

Obrys tlačítka

Kontrastní poměr4.54:1

Výsledky WCAG 2.2 pro tyto barvy
Běžný text, AAWCAG 1.4.3, vyžaduje 4.5:1Vyhovuje
Velký text, AAWCAG 1.4.3, vyžaduje 3:1Vyhovuje
Běžný text, AAAWCAG 1.4.6, vyžaduje 7:1Nevyhovuje
Velký text, AAAWCAG 1.4.6, vyžaduje 4.5:1Vyhovuje
Ikony, ohraničení a formulářová poleWCAG 1.4.11, vyžaduje 3:1Vyhovuje

Nejbližší barvy textu, které na tomto pozadí vyhovují

Velký text znamená nejméně 24 pixelů, nebo 18,66 pixelu tučně. Poměry se zaokrouhlují dolů, takže 4.499:1 se zobrazí jako 4.49:1 a nevyhovuje, jak to WCAG zamýšlí.

Nebo vyhledejte na stránce text s nízkým kontrastem

Zdarma. Zkontroluje zadanou adresu zhruba za 20 sekund.

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.

Nízký barevný kontrast: proč na něm záleží a jak ho opravit v Shopify, WooCommerce i na jakémkoli webu

Otázky k tomuto nástroji

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

Související nástroje

Report oprav přístupnosti ($174, jednorázově) vychází z úplného bezplatného skenu a přidává další stránky, změnu ke každému zjištění, PDF a opakované testy k ověření vašich oprav.

Co obsahuje Report oprav přístupnosti