EmmEEdu
Design Systems, WCAG Accessibility & Spatial Rhythm

UI / UX Design Engineering Studio

Great software combines engineering rigor with human-centric visual harmony. Test WCAG color contrast, explore 8pt spatial rhythm, and inspect modular typography scales.

Interactive UI/UX Design System Studio

Design Engineering

Test WCAG accessibility contrast ratios, inspect modular typography scales, and explore 8pt spatial rhythm.

Pick Colors:
WCAG 2.1 Compliance:
AA Normal Text (4.5:1) PASS
AA Large Text >18pt (3.0:1) PASS
AAA Enhanced Normal (7.0:1) PASS
8.33 : 1

Accessible Design Builds Global Products

Contrast is fundamental for low-vision users, mobile screens under direct sunlight, and cognitive readability.

Rule 01: Visual Hierarchy

Contrast Over Decoration

Guide the human eye effortlessly through scale, weight, and color value rather than cluttering the screen with unnecessary borders, gradients, or random 3D objects.

Rule 02: 8pt Spatial Rhythm

Consistent Spacing Tokens

Every margin, padding, height, and gap should be a multiple of 4px or 8px (4, 8, 16, 24, 32, 48, 64px) to create natural visual balance across viewports.

Rule 03: Accessible Core

WCAG 2.1 AA Compliance

Ensure all normal text meets at least a 4.5:1 contrast ratio against backgrounds, support full keyboard navigation, and never rely solely on color to convey meaning.