hci · 6 MIN READ
Fitts's Law in the Void
Dark interfaces change the math of attention: when the canvas is near-black, luminance becomes your largest click target. A working tour of target acquisition in dark UI.
Fitts's Law prices every pointer movement: time scales with distance over target width. But the law's 'width' is effective width — the region your eye can confidently aim at. In dark interfaces, a dim 44px button has a smaller effective width than a bright 32px one, because acquisition begins with finding the target, and luminance contrast is what the periphery finds.
fitts-law
The widget above measures your own acquisition times against targets of varying size, distance, and luminance on a carbon background. Most people discover their times for dim-but-large targets match bright-but-small ones — luminance is buying back milliseconds that geometry spent.
Design consequences
Practical rules I now build with: primary actions get both size and luminance (never rely on hue alone against black); destructive actions get luminance but reduced size — findable, deliberately not flickable; and hover states in dark UI should add light, not move elements, because motion in a dark field drags the eye harder than it does on white.
/* Dark-UI target rules as tokens */
--target-primary: { min-size: 44px; contrast: 9:1; }
--target-secondary: { min-size: 36px; contrast: 5.5:1; }
--target-danger: { min-size: 36px; contrast: 8:1; } /* findable, not flickable */