Kontrola kontrastu palety barev (až 12 barev)

Běžná kontrola kontrastu odpovídá na jednu otázku pro jednu dvojici. Značka má desítku barev a desítky dvojic. Zadejte paletu, až 12 barev, a tabulka ukáže poměr kontrastu WCAG každé dvojice: které dvojice jsou bezpečné pro text a které se hodí jen pro velký text, ikony a rámečky. Výpočet běží ve vašem prohlížeči; barvy se nikam neposílají.

Jak zadat barvy

Jedna barva na řádek nebo oddělené středníkem. Název před dvojtečkou je nepovinný: Primary: #2f47d9. Podporujeme hex (i s alfa kanálem), rgb(), rgba(), hsl(), hsla(), názvy barev jako navy a proměnné CSS zkopírované ze stylopisu, například --brand-500: #2f47d9;. Řádek, který nelze přečíst, se zobrazí pod polem, takže překlep nezahodí barvu bez povšimnutí. Poloprůhledné barvy se nejdřív smíchají s pozadím.

Jak číst matici

Řádky jsou barvy textu, sloupce jsou pozadí. Každá buňka ukazuje náhled dvojice, poměr a nejvyšší dosaženou úroveň:

Poměr se počítá podle vzorce WCAG 2.x a na dvě desetinná místa se ořezává, nezaokrouhluje: 4,49 není 4,5. Každá buňka má také text pro čtečky obrazovky („Ink na Paper: 16,1 : 1, AAA“) a tabulka má záhlaví řádků i sloupců, takže ji lze číst buňku po buňce z klávesnice.

Filtr a export

Vyberte úroveň, od které se dvojice počítá jako vyhovující, a zaškrtněte „V matici zobrazit jen vyhovující dvojice“, aby se zbytek skryl. Seznam pod maticí obsahuje vyhovující dvojice, nejlepší první. Kopírovat jako proměnné CSS dá paletu jako vlastní vlastnosti s vyhovujícími dvojicemi v komentáři; Kopírovat jako tabulku Markdown dá vyhovující dvojice pro stránku designového systému nebo pull request.

Co matice neřekne

• Stavy prvků. Barvy při najetí, fokusu, stisku, navštíveného odkazu a vypnutého stavu jsou samostatné dvojice; přidejte je jako vlastní řádky.
• Nerovnoměrné pozadí. Text na fotografii nebo přechodu zkontrolujte na nejsvětlejším a nejtmavším místě v kontrole kontrastu, která umí také vybírat barvy z obrázku.
• Význam předaný jen barvou. Červená chyba a zelený úspěch stejné jasnosti vypadají pro mnoho lidí stejně. WCAG požaduje další znak, například ikonu nebo text (1.4.1 Použití barvy).
• Kontrast na vašich skutečných stránkách. Vyhovující paletu lze použít špatně. Živou stránku otestujte v kontrole WCAG.

Je to automatický výpočet, ne úplný audit, a není to právní poradenství.

Jak sestavit paletu, která vyhoví

Začněte dvěma kotvami: tmavým inkoustem pro text a světlým papírem pro pozadí. Barvu značky ověřte proti oběma, protože většina barev značky vyhoví jen z jedné strany. Ke každé barvě značky připravte tmavší odstín pro text na bílé a světlejší pro text na tmavém. Mějte odstín 3 : 1 pro rámečky a ikony, protože kontrast netextových prvků platí pro rámečky polí a kroužky fokusu. Nejde o to, která dvojice je povolená teoreticky, ale k jakým dvojicím se motiv v praxi dostane.

Podle EAA a německého BFSG přebírá norma EN 301 549 kontrast WCAG úrovně AA, navrhujte tedy na 4,5 : 1 a 3 : 1. AAA se nevyžaduje. Pandus kontroluje barvy, které vaše stránky skutečně používají, na každé stránce každý týden.

Časté otázky

Kolik barev mohu zadat?

Až 12. Při 12 barvách má matice 132 dvojic. Pokud zadáte víc, použije se prvních 12 a kontrola řekne, kolik se vynechalo.

Jaký vzorec matice používá?

Poměr kontrastu WCAG 2.x, (L1 + 0,05) / (L2 + 0,05), počítaný z relativní svítivosti obou barev a oříznutý na dvě desetinná místa. Na tento vzorec odkazují kritéria WCAG 1.4.3, 1.4.6 a 1.4.11.

Odesílají se moje barvy na server?

Ne. Matice se počítá ve vašem prohlížeči, nic o paletě se neukládá ani neodesílá.

Proč se dvojice liší v obou směrech?

U plných barev se neliší: A na B má stejný poměr jako B na A. Matice přesto ukazuje oba řádky, abyste rychle našli barvu textu. U poloprůhledných barev se směry liší, protože se barva textu míchá s pozadím.

Je web přístupný, když paleta vyhoví?

Ne. Znamená to jen, že tyto dvojice mají dost kontrastu. Zda je stránky používají správně, i vše ostatní ve WCAG je stále třeba ověřit.