graphic-ux-ui-design

WCAG 2.2 AA compliance requires 4.5:1 contrast for normal text, 24x24 CSS px minimum target sizes, visible focus indicators, and single-pointer alternatives for drag interactions. Start by fixing the six most common failures: low contrast, missing alt text, missing form labels, empty links, empty buttons, and missing document language.

WCAG AA requires 4.5:1 for normal text, 3:1 for large text (24px or 18.7px bold), and 3:1 for non-text UI elements. AAA raises these to 7:1 and 4.5:1 but is aspirational. Use APCA as a supplementary check, especially for dark themes.

Use Load More with lazy-loading as the default for most product lists, pagination for goal-driven lookup and SEO, and infinite scroll only for exploratory feeds like image galleries. Baymard research shows infinite scroll harms goal-driven search because users lose their place and cannot bookmark results.

Use a three-tier token architecture: primitive tokens hold raw values, semantic tokens encode intent like color-action-primary, and component tokens scope to specific elements. Applications consume semantic tokens, so dark mode becomes a matter of re-pointing tokens rather than editing components.

Pure black (#000000) causes halation and blooming effects and disables shadow perception. Material Design recommends #121212 as the base surface, expressing elevation through lightness steps of roughly 3-5 points between layers instead of shadows.

Use native HTML elements first since they carry built-in roles, keyboard handling, and focus management. WebAIM data shows pages with ARIA average 34-41% more detected errors than pages without. Reserve ARIA for genuinely custom widgets like tabs, comboboxes, and live regions.