App development · lesson 12 of 24 · free

Buttons: size and contrast — App development for students

Fingers are much bigger than a mouse pointer, so app buttons must be big enough to hit. In this course our rule is that every button is at least 48 px tall, with space between buttons so you do not tap the wrong one. Labels should be clear words like Save, and the colours need strong contrast — dark on light or light on dark. Yellow on white or light grey on white is hard to read, especially outdoors in bright sunlight.

▶ Watch how it works

Got it? Practise ↓

Developer's tip

Big and bold — “at least 48 px tall, spaced apart and in strong contrast”

  1. Our rule: every button is at least 48 px tall. Missing px = 48 − height.
  2. Leave space between buttons; use clear words like Save or Send.
  3. Strong contrast (black on yellow, white on dark green) is easy to read; similar colours are hard.

Use it for: Designing buttons for any app, game or kiosk screen.

Worked example: 🔘 Our rule: buttons are at least 48 px tall. Which button is too small?
Next button: 48 px tall
Back button: 44 px tall
Done button: 64 px tall
Start button: 60 px tall → Back

  1. 48, 64 and 60 are all at least 48 — fine.
  2. 44 is less than 48, so the Back button is too small.

Check: Back needs 48 − 44 = 4 px more ✓

▶ Watch it animated

✓ Written and checked by the TalentJR team · Updated 13 Oct 2026 · How we make our lessons

✏️ Practice

Work it out in your head or on paper, then tap your answer — or type it and press Check. Stuck? Press “Show me how”.

Right: 0 · Tried: 0

🏁 Lesson 12 test

20 questions. Check each answer, then go to the next one. Get 16 or more right to pass.

🏅 Sign in with Google to earn the 🔘 Tap Target Tuner badge when you pass — and a certificate when you finish all 8 lessons of Part 2 · Designing Apps. You can still take the test without signing in.

🖨️ App Dev Worksheet: Button Size and Contrast

✨ Free AI tutor

Ask the AI tutor about this lesson

Why does it work? When should you use it? Ask in English, मराठी or हिंदी.

Sign in with Google to ask Free — 20 questions a day.

👩‍🏫 App development classes — live online, request a call back

Prefer a real teacher? TalentJR teachers take live online classes anywhere in India. Tell us what you need and our team will call you with timings and fees.

Live online classesSmall groups or 1:1 with a teacher, from home, any city.
We call you backOur team asks what your child needs, then shares timings and fees.
Home tutor?We are still building our list of home tutors — ask on the call if there is one near you.
Badges, certificates & gifts A badge for every lesson you pass, a certificate for every part you finish, plus TalentJR Points for daily practice. HTML, CSS & web development Build web pages with HTML, CSS and a little JavaScript.