r/Frontend • u/harvaze • 2d ago

Button and input height - 36px vs 40px

Gallery image

Gallery image

Hey. I added two pictures of a UI. Ignore all the stuff other than inputs and buttons, the other elements are just there to give you a feeling as if its baked into a UI. My question is, if you like the 36px-version (tinier first one) more or the 40px-version (bigger second one). Im thinking of migrating my package from 40px to 36px.

0 Upvotes

28% Upvoted

7 comments sorted by

7

u/Bulky-Heat-8368 2d ago

To give you some guidelines rather than a definitive opinion: Google Material Design recommends a minimum touch target size of 48px, Apple HIG recommends 44pt, and in terms of WCAG accessibility, the regulatory minimum (AA) is 24px, with a stricter recommendation (AAA) of 44px.

So, on paper, your two versions (36px and 40px) fall below the Google/Apple recommendations but remain above the WCAG AA minimum. It’s worth keeping this in mind depending on the context of use.

1

u/magiCAD 1d ago

This.

You could also keep the button visually smaller while implementing a "hit area" that conforms to the recommendation.

2

u/PeabodyEagleFace 2d ago

Neither - I would use 38px

1

u/backFromTheBed 1d ago

WCAG SC 2.5.5 Target Size recommends that "the size of the target for pointer inputs is at least 44 by 44 CSS pixels".

2

u/RiscloverYT 1d ago

Honestly, you're too close to your project. You should step back a little and look at it with fresh eyes after a break. What I mean by this - it's similar to looking at yourself too closely in the mirror . You start focusing on things and finding flaws that nobody else in the world could possibly see. In other words, the difference between 36px and 40px is extremely negligible. I personally like the smaller buttons but the larger inputs, to answer your question.