KOMPONENTY · ČLÁNEK „WEB MATEŘSKÉ ŠKOLY 2026“
Značky, karty a kontrasty
Přehled prvků použitých v článku a naměřené kontrastní poměry podle WCAG 2.2 AA. Text 4,5:1, velký text a ovládací prvky 3:1.
← Zpět na článekZNAČKY
Čtyři štítky, vždy ikona + text, nikdy jen barva. Monochromatické ikony 1,5–2 px.
POVINNOSTDOPORUČENÍVOLITELNÉČASTÝ OMYL
VERDIKT
Stav tvrzení v rychlém verdiktu. Barva je doplněna ikonou a textem.
ANONEPOZORČASTÝ OMYL
CALLOUT · SHRNUTÍ
Neutrální box pro shrnutí kapitoly.
SHRNUTÍ
Běžný psaný obsah se kvůli sluchovému postižení nemění.
CALLOUT · POZOR
Zvýrazněný box pro pravidla a časté omyly.
POZOR
Nic neoznačovat jako povinné jen proto, že je to dobrá praxe.
KARTA VERDIKTU
Tvrzení → výsledek → vysvětlení.
Školní řád MŠ musí být online.
ANO
Školní/vnitřní řád se zveřejňuje dálkově a zároveň na přístupném místě ve škole.
VERZÁLKOVÝ ŠTÍTEK · BOX OMYL × SKUTEČNOST
Formát „A · B“ se středovou tečkou, převzatý z článku o New Yorku.
ZÁKON 99/2019 SB. · § 3 ROZSAH U ŠKOL
ČASTÝ OMYLKAŽDÉ VIDEO MUSÍ MÍT ZNAKOVÝ JAZYK·SKUTEČNOSTKRITÉRIUM AAA
Kontrasty
Poměry vypočtené podle vzorce WCAG 2.x relativní luminance. U průsvitných podkladů je uvedena výsledná sloučená barva nad #0d0b0a.
| PRVEK | POPŘEDÍ | PODKLAD | POMĚR | POŽADAVEK | AA |
|---|---|---|---|---|---|
| Běžný text | #d4cdc5 | #0d0b0a | 12.47:1 | ≥ 4.5 | AA |
| Sekundární text | #cdc5bd | #131110 | 11.04:1 | ≥ 4.5 | AA |
| Popisky (mono) | #9d968f | #0d0b0a | 6.73:1 | ≥ 4.5 | AA |
| Štítky figur | #8d867f | #0d0b0a | 5.47:1 | ≥ 4.5 | AA |
| Nadpisy | #f4f1ee | #0d0b0a | 17.45:1 | ≥ 3 | AA |
| Terakota akcent (velký text/štítky) | #f2a566 | #0d0b0a | 9.68:1 | ≥ 3 | AA |
| Odkaz | #f2a566 | #0d0b0a | 9.68:1 | ≥ 4.5 | AA |
| Štítek POVINNOST | #0d0b0a | #f4f1ee | 17.45:1 | ≥ 4.5 | AA |
| Štítek ČASTÝ OMYL | #ffffff | #a8451f | 5.94:1 | ≥ 4.5 | AA |
| Štítek DOPORUČENÍ | #f4f1ee | #0d0b0a | 17.45:1 | ≥ 4.5 | AA |
| Štítek VOLITELNÉ | #d8d1ca | #252322 | 10.35:1 | ≥ 4.5 | AA |
| Verdikt ANO | #b7e8cd | #18261c | 11.58:1 | ≥ 4.5 | AA |
| Verdikt POZOR | #f2a566 | #2b1911 | 8.28:1 | ≥ 4.5 | AA |
| Tlačítko CTA | #ffffff | #b5542c | 4.92:1 | ≥ 4.5 | AA |
| Šedý doplněk | #a39c95 | #0d0b0a | 7.24:1 | ≥ 4.5 | AA |
Typografie a mřížka
PÍSMO
Helvetica Neue / Helvetica / Arial pro text a nadpisy; ui-monospace pro štítky a popisky.
Nadpis H2
Běžný text 18,5 px desktop / 17 px mobil, řádkování 1,65, maximální šířka sloupce 760 px.
ŠTÍTEK · MONO · 11 PX · PROKLAD .14EM
MŘÍŽKA A PŘÍSTUPNOST
Jeden hlavní sloupec 760 px, infografiky a tabulky do 1200 px. Sekce odděluje prostor, ne linky.
- H1 → H2 → H3 odpovídá kapitolám
- Tabulka kap. 12 je skutečná <table> se záhlavím; na mobilu stohované karty
- Infografiky mají role="img", aria-label a textové shrnutí
- Viditelný fokus 2 px terakota, cíle dotyku ≥ 24 px
- Bez autoplay, blikání a overlaye; respektuje prefers-reduced-motion