Luk-kryds på en modal
Et kryds i hjørnet af en dialog er 20 × 20 px.
- Målets bredde
- 20 px
- Målets højde
- 20 px
Det betyder: Den mindste side er 20 px, under kravet på 24 px. Giv knappen padding, så klikfladen bliver mindst 24 × 24, helst 44 × 44.
§ 13
WCAG — er det klikbare mål stort nok?
Er denne knap/dette link stort nok til at ramme sikkert, især på en berøringsskærm?
Svar: WCAG 2.2's succeskriterium 2.5.8 kræver, at klikbare mål (knapper, links, ikoner man skal trykke på) er mindst 24×24 CSS-pixels — medmindre der er nok afstand til nabo-mål, målet står inline i tekst, eller størrelsen er styret af browseren selv. Den skærpede AAA-anbefaling (2.5.5) sætter grænsen ved 44×44 px. Indtast målets bredde og højde for at se, hvilket niveau det opfylder.
Formel
mindste tilladte klikbare mål (AA) = 24×24 CSS-pixels
anbefalet klikbart mål (AAA) = 44×44 CSS-pixels
| Symbol | Betydning | Enhed |
|---|---|---|
| bredde_px | Målets bredde | px |
| hoejde_px | Målets højde | px |
| = | Mindste side | px |
| = | Areal | px² |
Gyldighed og kilde
- Kilde
- WCAG 2.2, succeskriterium 2.5.8 Target Size (Minimum), AA (W3C) + 2.5.5 Target Size (Enhanced), AAA
Gælder ikke når
- Beregneren tjekker kun selve målets størrelse — den fulde undtagelsesvurdering (afstand til naboelementer, inline-tekst-undtagelsen) kræver et manuelt skøn af den konkrete placering.
Regneeksempel
Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.
Sat ind
- Målets bredde20 px
- Målets højde20 px
Giver
- Mindste side20 px
- Areal400 px²
Kun for medlemmer
Selve beregneren er låst
Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.
Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.
Sådan bruger du den
Små ikoner og links er svære at ramme med en finger eller for folk med rystende hænder. WCAG 2.2 kræver mindst 24 × 24 CSS-pixels (2.5.8, AA), og 44 × 44 er anbefalingen på AAA-niveau (2.5.5). Beregneren viser målets mindste side og areal.
Trin for trin
- Mål knappens eller linkets klikbare område i DevTools (inkl. padding, uden margin).
- Find den mindste side.
- Sammenlign med 24 px (AA) og 44 px (AAA).
- Er målet mindre end 24 px, skal der være nok afstand til naboerne, ellers skal det gøres større.
Typiske fejl
- At måle kun ikonet. Det er hele den klikbare flade, der tæller, så padding hjælper.
- At tro at undtagelsen for links i tekst gælder alle links. Den gælder kun links midt i en sætning.
- At lade to små mål stå tæt op ad hinanden. Afstands-undtagelsen kræver en cirkel på 24 px om hvert mål, der ikke overlapper naboens.
Eksempler fra hverdagen
Mobilmenuens knap
Burger-knappen i toppen af en mobilside er 44 × 44 px.
- Målets bredde
- 44 px
- Målets højde
- 44 px
Det betyder: Den mindste side er 44 px, og arealet er 1.936 px². Det opfylder også AAA.
Chip i et filter
Filterchips i en webshop er 32 px brede og 24 px høje.
- Målets bredde
- 32 px
- Målets højde
- 24 px
Det betyder: Den mindste side er 24 px, så chippen består AA lige akkurat. På mobil er større chips nemmere at ramme.
Tommelfingerregel
24 px er gulvet, 44 px er godt for fingre. Apple og Google anbefaler 44 pt og 48 dp.
Sådan tjekker du svaret
Vælg elementet i DevTools, og hold musen over det. Den blå boks skal være mindst 24 × 24.