Laboratorio accesible

Probador de estados e interacciones UI

Previsualiza estados de componentes, prueba la claridad de interaccion y detecta problemas de accesibilidad antes de publicar tu UI.

Los colores del usuario solo afectan los componentes de vista previa y las exportaciones.

Probador de estados e interacciones UI workflow

Configuracion de tema

Define los roles UI usados por la vista previa. Los colores invalidos usan un respaldo seguro hasta corregirse.

Foundation

Usado para fondo de pagina en la vista previa.

Usado para fondo de superficie/tarjeta en la vista previa.

Usado para texto principal en la vista previa.

Usado para texto secundario en la vista previa.

Usado para texto tenue en la vista previa.

Usado para borde en la vista previa.

Actions

Usado para fondo de boton primario en la vista previa.

Usado para texto de boton primario en la vista previa.

Usado para fondo de boton secundario en la vista previa.

Usado para texto de boton secundario en la vista previa.

Usado para color de enlace en la vista previa.

Usado para anillo de foco en la vista previa.

Status

Usado para exito en la vista previa.

Usado para advertencia en la vista previa.

Usado para error en la vista previa.

Usado para fondo deshabilitado en la vista previa.

Usado para texto deshabilitado en la vista previa.

Configuracion de estados

Ajusta como se generan hover, activo, foco, deshabilitado, seleccionado y densidad.

Puntaje de interaccion

Deficiente

18

Revisiones aprobadas

1

Advertencias

2

Revisiones fallidas

2

Problemas criticos de accesibilidad

Vistas previas de componentes

Button states

Primary button across states

Default

Hover

Active

Focus-visible

Loading

Disabled

Hierarchy and variants

Primary

Secondary

Ghost

Danger

Icon button

Button group

Analisis UX y accesibilidad

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.

Sugerencias

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.

Matriz de contraste/estado

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

Exportar

Variables CSS de roles

: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;
}

Variables CSS de estados

: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;
}

Tokens JSON

{
  "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
  }
}

Reporte de accesibilidad

# 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.

Checklist de estados

- [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