Digital Accessibility for All

Overview

Digital Accessibility for All is a Thai government initiative dedicated to ensuring inclusive digital experiences for all citizens. The design system embodies "Soft Institutional Clarity"—a visual language that balances governmental authority with warm, approachable accessibility. The brand serves persons with disabilities, elderly populations, and all citizens seeking equitable access to digital services. The aesthetic combines soft, rounded forms (40px border-radius on hero badges, 6px on inputs) with a restrained, trust-building color palette anchored in a professional blue (#155b96) and supported by gentle accent yellows and reds. The UI evokes clarity without coldness, formality without intimidation.

The brand voice is precise, patient, and empowering. Sentences are direct and action-oriented, never condescending. Example: "Check your website's accessibility in seconds—no technical knowledge required." The tone acknowledges that digital inclusion is both a right and a responsibility, delivered with calm confidence and respect for diverse user needs.

Colors

The color system prioritizes trust, clarity, and inclusive visual hierarchy. Primary (#155b96) is a professional, accessible blue used for all interactive elements—buttons, links, focus states, and key information. It meets WCAG AAA contrast ratios (7.2:1) against white backgrounds, ensuring legibility for users with low vision. Secondary (#1677ff) provides a brighter accent for secondary actions and highlights, while Tertiary (#faad14) signals warnings and important notices. Error (#ff4d4f) communicates validation failures and alerts with sufficient contrast (8.1:1 on white). The surface stack progresses from pure white (#ffffff) through subtle grays (#fbfbfb, #f8f8f8, #e0e0e0), creating depth without visual noise. Primary-container (#e7f2fd) is a pale blue used for badges, chips, and sec

Typography

The type system uses K2D, a Thai-optimized sans-serif that ensures legibility for both Thai and English text at all sizes. Display (60px, 700 weight) is reserved for hero headlines and major section breaks; Headline-lg (40px, 600 weight) anchors page sections; Body-md (16px, 400 weight) is the default reading size, set at 24px line-height for comfortable scanning. Label-md (14px, 600 weight) is applied to buttons and form labels, with 0.01em letter-spacing to maintain clarity at small sizes. All body text uses 1.5 line-height (24px for 16px text) to support users with dyslexia and low vision. Headlines employ -0.02em to -0.04em letter-spacing to create visual hierarchy and reduce cognitive load. Apply text-shadow: 0 1px 2px rgba(0,0,0,0.08) on small labels (label-sm) when placed over light

Layout

The layout follows a 12-column grid with a 1200px container max-width, maintaining 24px gutters on desktop and 16px on mobile. The page rhythm uses lg spacing (40px) for major section separation, md spacing (24px) for component grouping, and sm spacing (12px) for internal element spacing. Hero sections employ asymmetrical layouts—text on the left (40% width) with illustrative imagery on the right (60% width)—creating visual interest while maintaining focus on messaging. White-space is generous: minimum 40px padding around major content blocks, 24px around cards, and 12px inside form fields. This breathing room is critical for users with cognitive disabilities and those using magnification. The header uses 20px vertical padding (24px horizontal) to create a clear, spacious navigation zone.

Elevation & Depth

Depth is achieved through subtle shadows and surface color shifts rather than dramatic layering. Base level (Level 1) uses the white surface (#ffffff) with no shadow. Level 2 (cards, modals) applies elevation.sm (0 1px 2px rgba(0,0,0,0.06)) with a 1px border at #d9d9d9, creating gentle separation. Level 3 (floating actions, popovers) uses elevation.md (0 4px 12px rgba(0,0,0,0.08)) with the same border treatment. Focus states add a 2px ring at rgba(21, 91, 150, 0.1) around interactive elements, visible to all users including those with color-blindness. Hover states transition background color o

Shapes

The shape philosophy is "Soft Institutional"—rounded corners signal approachability and accessibility while maintaining professional credibility. Buttons and primary CTAs use 1rem (16px) border-radius, creating a friendly, inviting appearance. Form inputs use 0.5rem (8px) border-radius, balancing softness with functional clarity. Cards and containers use 1.5rem (24px) border-radius, emphasizing the welcoming nature of information architecture. Hero badges and decorative elements use 40px border-radius (nearly circular) to create visual warmth and draw attention. The full (9999px) radius is res

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #155b96 background with white text, 48px height, 12px vertical / 24px horizontal padding, and 1rem border-radius. On hover, the background shifts to #0d3f63 (darker blue) over 0.2s, providing clear feedback. Button-secondary uses transparent background with a 2px #155b96 border and matching text color, maintaining visual weight while indicating secondary priority. Button-ghost removes the border and uses transparent background, applying rgba(21, 91, 150, 0.08) on hover. All buttons include a focus ring: 2px solid rgba(21, 91, 150, 0.2) with 2px offset, visible to keyboard users and those using assistive technology.

Containers & Surfaces Cards use #fbfbfb background with 1px #d9d9d9 border, 24px paddin

Do's and Don'ts

**Do**

• Do use K2D for all typography—it ensures optimal rendering for Thai and English text, critical for an inclusive government service.
• Do apply 24px line-height on body text (16px font) to support users with dyslexia and low vision; never compress below 1.5x.
• Do include focus rings (2px rgba(21, 91, 150, 0.2)) on all interactive elements; they are not optional for keyboard navigation.
• Do maintain 3:1 minimum contrast on all text and interactive elements; test with WCAG AA standards using WebAIM or Lighthouse.
• Do use rounded corners (8px–24px) consistently; they signal approachability and reduce visual harshness for users with sensory sensitivities.
• Do provide 40px minimum touch targets for buttons and links; this accommodates users with motor control difficulties.
• Do use transitions (0.2s cubic-bezier(0.4, 0, 0.2, 1)) on hover/focus states; they provide predictable, smooth feedback.

**Don't**

• Don't use pure black (#000) or pure white (#fff) as primary text or background; use #171717 on #ffffff for reduced eye strain.
• Don't rely on color alone to communicate state (error, success, warning); always pair with icons or text labels for color-blind users.
• Don't apply shadows with blur-radius > 8px; they reduce edge definition critical for low-vision users. Use 0 1px 2px for base shadows.
• Don't use serif fonts or script typefaces for body text; K2D's clean, geometric forms are essential for accessibility and Thai rendering.
• Don't compress padding below 12px on form fields or 24px on cards; cramped spacing increases cognitive load and excludes users with motor disabilities.
• Don't animate elements for longer than 0.3s or use motion > 60fps; rapid animations trigger vestibular disorders and motion sickness.
• Don't use placeholder text as the only label; always include a visible label element above or adjacent to inputs for screen reader users.