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
It means: 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 — is the clickable target large enough?
Er denne knap/dette link stort nok til at ramme sikkert, især på en berøringsskærm?
Answer: 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.
Formula
mindste tilladte klikbare mål (AA) = 24×24 CSS-pixels
anbefalet klikbart mål (AAA) = 44×44 CSS-pixels
| Symbol | Meaning | Unit |
|---|---|---|
| bredde_px | Målets bredde | px |
| hoejde_px | Målets højde | px |
| = | Mindste side | px |
| = | Area | px² |
Validity and source
- Source
- WCAG 2.2, succeskriterium 2.5.8 Target Size (Minimum), AA (W3C) + 2.5.5 Target Size (Enhanced), AAA
Does not apply when
- 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.
Worked example
The calculator's own default values inserted. The figures are calculated with exactly the formula the tool uses.
Substituted
- Målets bredde20 px
- Målets højde20 px
Giver
- Mindste side20 px
- Area400 px²
Members only
The calculator itself is locked
Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.
Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.
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.
Step by step
- 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.
Typical errors
- 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.
Examples from everyday life
Mobilmenuens knap
Burger-knappen i toppen af en mobilside er 44 × 44 px.
- Målets bredde
- 44 px
- Målets højde
- 44 px
It means: 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
It means: Den mindste side er 24 px, så chippen består AA lige akkurat. På mobil er større chips nemmere at ramme.
Rule of thumb
24 px er gulvet, 44 px er godt for fingre. Apple og Google anbefaler 44 pt og 48 dp.
How to check the answer
Vælg elementet i DevTools, og hold musen over det. Den blå boks skal være mindst 24 × 24.