# Kontrola kontrastu WCAG ve Figmě a Canvě URL: https://pandus.online/cs/kontrast-figma-canva Updated: 2026-10-14 Jak zkontrolovat barevný kontrast WCAG ve Figmě a Canvě vestavěnými nástroji, co přehlédnou a jak před spuštěním otestovat celou barevnou paletu značky. **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. 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)](https://pandus.online/cs/wcag/1-4-3-contrast-minimum) a [kontrastu u netextových prvků](https://pandus.online/cs/wcag/1-4-11-non-text-contrast). ## 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](https://pandus.online/cs/kontrola-pristupnosti-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](https://pandus.online/cs/kontrola-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](https://pandus.online/cs/wcag-velikost-pisma). - **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](https://pandus.online/cs/kontrola-kontrastu-barev), který navrhne i nejbližší barvu, jež projde. 2. Paletu značky zkontrolujte [kontrolorem kontrastu palety](https://pandus.online/cs/kontrola-kontrastu-palety) a vyhovující dvojice zapište do design systému. 3. Až je stránka postavená, spusťte [kontrolu WCAG](https://pandus.online/cs/wcag-checker) 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](https://pandus.online/cs/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 Q: Má Figma kontrolu kontrastu? A: 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. Q: Má Canva kontrolu přístupnosti? A: 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. Q: Jaký poměr kontrastu vyžaduje WCAG? A: 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. Q: Zkontroluje Pandus můj soubor z Figmy nebo Canvy? A: 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.