Accessibility lab

UI State & Interaction Tester

Preview component states, test interaction clarity, and catch accessibility issues before shipping your UI.

User colors affect only the preview components and generated exports.

UI State & Interaction Tester workflow

Theme setup

Define the UI roles used by the preview. Invalid colors fall back safely until fixed.

Foundation

Used for page background in the preview.

Used for surface/card background in the preview.

Used for primary text in the preview.

Used for secondary text in the preview.

Used for muted text in the preview.

Used for border in the preview.

Actions

Used for primary button background in the preview.

Used for primary button text in the preview.

Used for secondary button background in the preview.

Used for secondary button text in the preview.

Used for link color in the preview.

Used for focus ring in the preview.

Status

Used for success in the preview.

Used for warning in the preview.

Used for error in the preview.

Used for disabled background in the preview.

Used for disabled text in the preview.

State configuration

Tune how hover, active, focus, disabled, selected, and density states are generated.

Interaction score

Poor

18

Passing checks

1

Warnings

2

Failing checks

2

Critical accessibility issues

Component previews

Button states

Primary button across states

Default

Hover

Active

Focus-visible

Loading

Disabled

Hierarchy and variants

Primary

Secondary

Ghost

Danger

Icon button

Button group

UX and accessibility analysis

pass Primary button

Button text contrast is too low

Primary button text is readable (6.77:1).

Keep this pairing documented in your tokens.

pass Secondary button

Secondary button contrast

Secondary button text is readable (19.44:1).

Keep this pairing documented in your tokens.

pass Page text

Body text contrast

Body text is readable (18.31:1).

Keep this pairing documented in your tokens.

pass Muted text

Muted text readability

Muted text remains readable (5.37:1).

Keep this pairing documented in your tokens.

pass Links

Link contrast

Links are readable against the page (6.31:1).

Keep this pairing documented in your tokens.

pass Links

Link distinguishability

Links are visually distinct from body text and also use underline cues.

Keep the visual difference consistent.

fail Focus ring

Focus ring is hard to see

Focus ring contrast is below UI component guidance on the page (1.50:1).

Make the focus ring brighter or darker so keyboard users can see it.

fail Focus ring

Focus ring against components

Focus ring is hard to see on the primary component (1.80:1).

Use an outline color that contrasts with both the page and component fill.

pass Keyboard focus

Focus outline visibility

Focus outlines are shown in previews.

Keep focus-visible styling available for keyboard users.

pass Error state

Error text contrast

Error text/icon contrast is readable (4.83:1).

Keep this pairing documented in your tokens.

pass Success state

Success text contrast

Success text/icon contrast is readable (5.02:1).

Keep this pairing documented in your tokens.

pass Warning state

Warning text contrast

Warning text/icon contrast is readable (5.02:1).

Keep this pairing documented in your tokens.

pass Inputs

Input border visibility

Input borders are easy to see (19.44:1).

Keep this pairing documented in your tokens.

pass Disabled controls

Disabled text clarity

Disabled text remains legible (4.16:1).

Keep this pairing documented in your tokens.

pass Buttons

Hover state difference

Hover state is visibly different from default.

Keep the visual difference consistent.

warning Buttons

Active state difference

Pressed state is a little close to hover.

Increase active darkening/lightening or add a pressed transform.

pass Disabled controls

Disabled state looks inactive

Disabled controls look inactive compared with primary actions.

Keep the visual difference consistent.

pass Forms and alerts

Error state does not rely only on color

Previewed errors include icon/text labels and helper messages.

Keep icon, label, and message cues with every color-coded status.

pass Button group

Button hierarchy is visually clear

Primary and secondary buttons have clear visual hierarchy.

Keep the visual difference consistent.

pass Cards

Selected card state is distinguishable

Selected card state is visibly different.

Keep the visual difference consistent.

pass Toggle, checkbox, radio

Toggle checked/unchecked states

Checked and unchecked controls are clearly different.

Keep the visual difference consistent.

Suggestions

fail Focus ring

Focus ring is hard to see

Focus ring contrast is below UI component guidance on the page (1.50:1).

Make the focus ring brighter or darker so keyboard users can see it.

fail Focus ring

Focus ring against components

Focus ring is hard to see on the primary component (1.80:1).

Use an outline color that contrasts with both the page and component fill.

warning Buttons

Active state difference

Pressed state is a little close to hover.

Increase active darkening/lightening or add a pressed transform.

Contrast/state matrix

PairColorsContrastAA normalAA largeUI
Text on page background #0D0D0D on #FFF7ED18.31:1PassPassPass
Text on surface #0D0D0D on #FFFFFF19.44:1PassPassPass
Muted text on surface #6F6A62 on #FFFFFF5.37:1PassPassPass
Primary button text on primary button #0D0D0D on #FF6A006.77:1PassPassPass
Secondary button text on secondary button #0D0D0D on #FFFFFF19.44:1PassPassPass
Link on background #1D4ED8 on #FFF7ED6.31:1PassPassPass
Focus ring on background #FFC400 on #FFF7ED1.50:1FailFailFail
Error on background #DC2626 on #FFF7ED4.55:1PassPassPass
Success on background #15803D on #FFF7ED4.72:1PassPassPass
Warning on background #B45309 on #FFF7ED4.73:1PassPassPass
Disabled text on disabled background #6F6A62 on #E8E2D84.16:1FailPassPass
Border on background #0D0D0D on #FFF7ED18.31:1PassPassPass

Export

Role CSS variables

:root {
  --color-background: #FFF7ED;
  --color-surface: #FFFFFF;
  --color-text: #0D0D0D;
  --color-text-secondary: #3A3733;
  --color-text-muted: #6F6A62;
  --color-border: #0D0D0D;
  --color-primary: #FF6A00;
  --color-primary-text: #0D0D0D;
  --color-secondary: #FFFFFF;
  --color-secondary-text: #0D0D0D;
  --color-link: #1D4ED8;
  --color-focus-ring: #FFC400;
  --color-success: #15803D;
  --color-warning: #B45309;
  --color-error: #DC2626;
  --color-disabled-bg: #E8E2D8;
  --color-disabled-text: #6F6A62;
}

State CSS variables

:root {
  --color-primary-hover: #FF7F24;
  --color-primary-active: #FF8A37;
  --color-primary-loading: #FF8B38;
  --color-secondary-hover: #FFEADB;
  --color-secondary-active: #FFDFC8;
  --color-ghost-hover: #FFF7DB;
  --color-danger-hover: #E14444;
  --color-input-hover-border: #2F2F2F;
  --color-input-focus-border: #FFC400;
  --color-card-hover: #FFF7DB;
  --color-card-selected: #FFF2C8;
  --color-card-disabled: #EFEBE4;
  --color-link-hover: #3D67DD;
  --color-link-visited: #5243A6;
  --color-toggle-checked: #FF6A00;
  --color-toggle-unchecked: #FFFFFF;
}

JSON design tokens

{
  "colors": {
    "pageBackground": "#FFF7ED",
    "surfaceBackground": "#FFFFFF",
    "primaryText": "#0D0D0D",
    "secondaryText": "#3A3733",
    "mutedText": "#6F6A62",
    "border": "#0D0D0D",
    "primaryButtonBackground": "#FF6A00",
    "primaryButtonText": "#0D0D0D",
    "secondaryButtonBackground": "#FFFFFF",
    "secondaryButtonText": "#0D0D0D",
    "link": "#1D4ED8",
    "focusRing": "#FFC400",
    "success": "#15803D",
    "warning": "#B45309",
    "error": "#DC2626",
    "disabledBackground": "#E8E2D8",
    "disabledText": "#6F6A62"
  },
  "states": {
    "primaryHover": "#FF7F24",
    "primaryActive": "#FF8A37",
    "primaryLoading": "#FF8B38",
    "secondaryHover": "#FFEADB",
    "secondaryActive": "#FFDFC8",
    "ghostHover": "#FFF7DB",
    "dangerHover": "#E14444",
    "inputHoverBorder": "#2F2F2F",
    "inputFocusBorder": "#FFC400",
    "inputErrorBackground": "#FCE9E9",
    "inputSuccessBackground": "#E8F2EC",
    "cardHover": "#FFF7DB",
    "cardSelected": "#FFF2C8",
    "cardDisabled": "#EFEBE4",
    "linkHover": "#3D67DD",
    "linkVisited": "#5243A6",
    "toggleUnchecked": "#FFFFFF",
    "toggleChecked": "#FF6A00",
    "focusShadow": "#FFD653"
  },
  "settings": {
    "intensity": "medium",
    "buttonStyle": "filled",
    "cardStyle": "bordered",
    "borderRadius": "soft",
    "density": "comfortable",
    "previewBackground": "page",
    "showLabels": true,
    "showFocusOutlines": true
  }
}

Accessibility report

# UI State & Interaction Tester Report

Score: Poor
Passing checks: 18
Warnings: 1
Failing checks: 2
Critical accessibility issues: 2

## Checks
- PASS - Primary button: Button text contrast is too low. Primary button text is readable (6.77:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Secondary button: Secondary button contrast. Secondary button text is readable (19.44:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Page text: Body text contrast. Body text is readable (18.31:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Muted text: Muted text readability. Muted text remains readable (5.37:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Links: Link contrast. Links are readable against the page (6.31:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Links: Link distinguishability. Links are visually distinct from body text and also use underline cues. Suggestion: Keep the visual difference consistent.
- FAIL - Focus ring: Focus ring is hard to see. Focus ring contrast is below UI component guidance on the page (1.50:1). Suggestion: Make the focus ring brighter or darker so keyboard users can see it.
- FAIL - Focus ring: Focus ring against components. Focus ring is hard to see on the primary component (1.80:1). Suggestion: Use an outline color that contrasts with both the page and component fill.
- PASS - Keyboard focus: Focus outline visibility. Focus outlines are shown in previews. Suggestion: Keep focus-visible styling available for keyboard users.
- PASS - Error state: Error text contrast. Error text/icon contrast is readable (4.83:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Success state: Success text contrast. Success text/icon contrast is readable (5.02:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Warning state: Warning text contrast. Warning text/icon contrast is readable (5.02:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Inputs: Input border visibility. Input borders are easy to see (19.44:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Disabled controls: Disabled text clarity. Disabled text remains legible (4.16:1). Suggestion: Keep this pairing documented in your tokens.
- PASS - Buttons: Hover state difference. Hover state is visibly different from default. Suggestion: Keep the visual difference consistent.
- WARNING - Buttons: Active state difference. Pressed state is a little close to hover. Suggestion: Increase active darkening/lightening or add a pressed transform.
- PASS - Disabled controls: Disabled state looks inactive. Disabled controls look inactive compared with primary actions. Suggestion: Keep the visual difference consistent.
- PASS - Forms and alerts: Error state does not rely only on color. Previewed errors include icon/text labels and helper messages. Suggestion: Keep icon, label, and message cues with every color-coded status.
- PASS - Button group: Button hierarchy is visually clear. Primary and secondary buttons have clear visual hierarchy. Suggestion: Keep the visual difference consistent.
- PASS - Cards: Selected card state is distinguishable. Selected card state is visibly different. Suggestion: Keep the visual difference consistent.
- PASS - Toggle, checkbox, radio: Toggle checked/unchecked states. Checked and unchecked controls are clearly different. Suggestion: Keep the visual difference consistent.

Component state checklist

- [x] Primary button: Button text contrast is too low
- [x] Secondary button: Secondary button contrast
- [x] Page text: Body text contrast
- [x] Muted text: Muted text readability
- [x] Links: Link contrast
- [x] Links: Link distinguishability
- [ ] Focus ring: Focus ring is hard to see
- [ ] Focus ring: Focus ring against components
- [x] Keyboard focus: Focus outline visibility
- [x] Error state: Error text contrast
- [x] Success state: Success text contrast
- [x] Warning state: Warning text contrast
- [x] Inputs: Input border visibility
- [x] Disabled controls: Disabled text clarity
- [x] Buttons: Hover state difference
- [ ] Buttons: Active state difference
- [x] Disabled controls: Disabled state looks inactive
- [x] Forms and alerts: Error state does not rely only on color
- [x] Button group: Button hierarchy is visually clear
- [x] Cards: Selected card state is distinguishable
- [x] Toggle, checkbox, radio: Toggle checked/unchecked states
enes