Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Kontrola kontrastu WCAG ve Figmě a Canvě

Figma i Canva umí zkontrolovat barevný kontrast přímo v souboru s designem. Ve Figmě otevřete barvu ve výběru barev a přepněte na její zobrazení přístupnosti (accessibility view): ukáže poměr mezi vrstvou a pozadím a zda splňuje WCAG AA a AAA.

Aktualizováno 14. října 2026 · Čtení na 4 min · Jak píšeme a kontrolujeme naše průvodce

V Canvě zvolte Soubor → Přístupnost (File → Accessibility → Check design accessibility). Tyto kontroly odhalí nízký kontrast včas, ale posuzují vždy jednu dvojici barev a přehlédnou stavy jako hover a fokus, proto otestujte i celou paletu. Údaje pocházejí z nápověd Figmy a Canvy, ověřeno 14. října 2026.

Hranice kontrastu podle WCAG

Co Úroveň AA Úroveň AAA
Běžný text 4,5:1 7:1
Velký text (zhruba 24 px normální nebo 18,5 px tučný) 3:1 4,5:1
Ikony, ohraničení polí, indikátory fokusu a další prvky rozhraní (WCAG 1.4.11) 3:1 —

Podrobnosti a příklady najdete na stránkách WCAG o kontrastu (minimum) a kontrastu u netextových prvků.

Kontrast ve Figmě

  • Kde: vyberte vrstvu, otevřete její barvu ve výběru barev a přejděte na zobrazení přístupnosti. Vybraná vrstva je vždy popředí.
  • Co ukazuje: poměr od 1:1 do 21:1 a výsledky AA a AAA pro běžný text, velký text nebo grafiku; AAA platí jen pro text.
  • Když test neprojde: vedle AA nebo AAA se objeví výstražná ikona. Po jejím výběru se barva posune na nejbližší hodnotu, která projde.
  • Omezení: poměr porovnává jas dvou barev, takže přechody, obrázky za textem a průhledné vrstvy chtějí druhý pohled. Figma nabízí i bezplatný webový nástroj pro dva hex kódy.

Kontrast v Canvě

  • Kde: v návrhu, který můžete upravovat, Soubor → Přístupnost (File → Accessibility → Check design accessibility). S oprávněním jen komentovat se kontrola nezobrazí.
  • Co pokrývá: barevný kontrast a další časté problémy; nástroje Canvy také pomáhají přidat alternativní texty k obrázkům, uspořádat nadpisy a nastavit pořadí čtení.
  • Omezení: Canva sama uvádí, že kontrola není zárukou přístupnosti. Návrhy exportované do PDF potřebují vlastní kontrolu; viz jak zkontrolovat přístupnost PDF.

Co designové nástroje nezachytí

  • Stavy. Hover, fokus, zakázaný stav a chyba bývají samostatné snímky nebo nejsou nakreslené vůbec. Ověřte, že indikátor fokusu má vůči okolí 3:1.
  • Text na obrázcích a přechodech. Poměr se mění po celém obrázku; otestujte nejsvětlejší a nejtmavší místo za textem.
  • Celá paleta. Barva, která funguje na bílé, může neprojít na světle šedé vaší značky. Všechny dvojice otestujete najednou naším kontrolorem kontrastu palety.
  • Velikost písma. Zda text počítá jako „velký“, záleží na jeho skutečné velikosti v prohlížeči; viz velikost písma a WCAG.
  • Všechno, co není barva. Popisky, nadpisy, pořadí při ovládání klávesnicí a alternativní texty se rozhodují až při sestavení stránky.

Od designu k živému webu

  1. Jednotlivé dvojice zkontrolujte naším kontrolorem kontrastu, který navrhne i nejbližší barvu, jež projde.
  2. Paletu značky zkontrolujte kontrolorem kontrastu palety a vyhovující dvojice zapište do design systému.
  3. Až je stránka postavená, spusťte kontrolu WCAG na testovací nebo živé stránce: měří kontrast skutečného textu na skutečném pozadí.
  4. Zajímá vás novější metoda kontrastu? Přečtěte si APCA vs. WCAG; WCAG 2.2 dál používá výše uvedený poměr.

Pandus kontroluje webové stránky, ne soubory s designem. Je to automatická kontrola, ne úplný audit.

Časté otázky

Má Figma kontrolu kontrastu?

Ano. Výběr barev má zobrazení přístupnosti, které ukazuje poměr kontrastu mezi vybranou vrstvou a jejím pozadím a označuje výsledky AA a AAA pro běžný text, velký text a grafiku. Figma nabízí také bezplatný webový nástroj na kontrolu kontrastu.

Má Canva kontrolu přístupnosti?

Ano. V návrhu, který můžete upravovat, otevřete Soubor, potom Přístupnost a kontrolu přístupnosti návrhu. Canva upozorní na problémy, například barevný kontrast, a pomáhá s alternativními texty, nadpisy a pořadím čtení; podle Canvy to není záruka přístupnosti.

Jaký poměr kontrastu vyžaduje WCAG?

Na úrovni AA: 4,5:1 pro běžný text, 3:1 pro velký text (zhruba 24 px, nebo 18,5 px tučně) a 3:1 pro ikony, ohraničení polí formuláře a další prvky rozhraní a grafiku, která nese význam.

Zkontroluje Pandus můj soubor z Figmy nebo Canvy?

Ne. Pandus kontroluje webové stránky, až jsou živé nebo na testovací stránce. Pro soubory s designem použijte vestavěné nástroje, náš kontrolor kontrastu pro jednotlivé dvojice a kontrolor palety pro všechny barvy značky.

Zdroje

  • Figma Help Center, Apply paints with the color picker (accessibility view): https://help.figma.com/hc/en-us/articles/360041003774-Apply-paints-with-the-color-picker
  • Figma, Color Contrast Checker: https://www.figma.com/color-contrast-checker/
  • Canva Help Center, Using design accessibility: https://www.canva.com/help/using-design-accessibility/
  • W3C, Understanding WCAG 2.2 — 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
  • W3C, Understanding WCAG 2.2 — 1.4.11 Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html