Nástroje pro barvy

Kontrola kontrastu barev: poměr WCAG AA a AAA – zdarma

Zdarma, bez registrace, funguje ve vašem prohlížeči. Zadejte barvu textu a pozadí a zjistěte poměr kontrastu WCAG a výsledky AA a AAA. Pokud test neprojde, zvolte nejbližší vyhovující barvu.

Velký text vypadá takto

Běžný text vypadá takto. Příliš žluťoučký kůň úpěl ďábelské ódy a drobný tisk, třeba titulek, sedí pod ním.

Malý text: 14px popisek.

Tlačítko
Poměr kontrastu13.08:1
  • Normální text, AA: SplněnoBěžný text, alespoň 4.5:1
  • Normální text, AAA: SplněnoZvýšená úroveň, alespoň 7:1
  • Velký text, AA: Splněno18pt+, nebo 14pt+ tučně, alespoň 3:1
  • Velký text, AAA: SplněnoZvýšená úroveň, alespoň 4.5:1
  • Ikony a ovládací prvky, AA: SplněnoTlačítka, rámečky, čáry grafů: 3:1

Používá vzorec kontrastu WCAG 2. Poměry se nikdy nezaokrouhlují nahoru, takže 4.49:1 se nepočítá jako 4.5:1. Kontrola probíhá ve vašem zařízení.

Proč použít Kontrola kontrastu barev

100% zdarma
Používejte, jak často chcete. Bez registrace, bez vodoznaku, bez instalace.
Soukromí od základu
Co napíšete, zůstává ve vašem prohlížeči a nikdy se nám neposílá.
Funguje na jakémkoli zařízení
Běží ve vašem prohlížeči na Windows, Macu, Linuxu, Androidu a iPhonu. Není potřeba žádná aplikace.

Jak použít Kontrola kontrastu barev

  1. Zadejte Barvu textu a Pozadí jako HEX, rgb(), hsl() nebo název, například navy, nebo je vyberte ze vzorků. Pomocí Prohodit je prohodíte.
  2. Přečtěte si poměr kontrastu a těchto pět výsledků: běžný text AA a AAA, velký text AA a AAA a ikony a ovládací prvky.
  3. Zkontrolujte živý náhled nadpisů, základního textu, drobného písma a tlačítka v těchto barvách.
  4. Pokud některá úroveň neprojde, klikněte na jednu z Nejbližších vyhovujících barev. Zachová váš odstín a změní jen to, jak světlý nebo tmavý je text.

Často kladené otázky

Jaký poměr kontrastu potřebuji?

WCAG AA vyžaduje 4.5:1 pro běžný text a 3:1 pro velký text a části rozhraní, jako jsou tlačítka, okraje a ikony. AAA vyžaduje 7:1 pro běžný text a 4.5:1 pro velký text.

Co se počítá jako velký text?

Alespoň 18 bodů (24px) v běžném řezu, nebo 14 bodů (asi 18.7px) tučně.

Jak se počítá poměr kontrastu?

Podle vzorce WCAG 2: spočítá se relativní jas každé barvy a světlejší z nich plus 0.05 se vydělí tmavší plus 0.05. Výsledek sahá od 1:1 (žádný kontrast) do 21:1 (černá na bílé).

Proč 4.49:1 neprojde?

WCAG říká, že poměry se nesmějí zaokrouhlovat nahoru, takže cokoli pod 4.5:1 nesplňuje AA pro běžný text. Tento nástroj poměr nikdy nezaokrouhluje nahoru.

Jak opravím barvu, která neprojde?

V části Nejbližší vyhovující barvy nástroj navrhne barvu textu pro AA a jednu pro AAA. Každá zachová odstín a sytost a mění jen světlost, takže vaše značková barva zůstane poznatelná. Klikněte na jednu a použijte ji.

Zvládne průhledné barvy textu?

Ano. Průhledná barva textu, například rgba(26, 20, 70, 0.6), se před měřením kontrastu smíchá s pozadím. Průhlednost pozadí se ignoruje a bere se jako plná barva.

Potřebují tlačítka a ikony také kontrast?

Ano. WCAG 2.1 vyžaduje 3:1 mezi částmi rozhraní (okraje tlačítek, formulářová pole, ikony, čáry grafů) a barvami vedle nich. Výsledek Ikony a ovládací prvky to kontroluje.

Znamená úspěšný test, že je můj web přístupný?

Znamená to, že tato dvojice barev splňuje pravidlo kontrastu WCAG. Přístupnost zahrnuje mnohem víc, například velikost textu, stavy zaměření, alternativní texty a ovládání klávesnicí, takže to berte jako jednu kontrolu z několika.

Je Kontrola kontrastu barev zdarma?

Ano. Používání je zdarma, bez registrace a bez instalace čehokoli.

Nápověda a návody (v angličtině)

Související nástroje