Accessibility lab

Primary action contrast

5.17:1 against primary (#ffffff on #2563EB)

Body text contrast

16.97:1 text on background

Muted text contrast

4.63:1 muted on background (large/UI text threshold)

Button has a visible focus state

Focus ring is documented and implemented.

Button supports keyboard interaction

Keyboard interaction is part of the contract.

Button exposes a visible or accessible label

Labeling is specified.

Button uses semantic HTML

Native elements and landmarks are specified.

Button defines a disabled state

Disabled behavior is specified.

Button meets recommended touch target size

Default size meets 24–44px guidance for the control.

Icon Button has a visible focus state

Focus ring is documented and implemented.

Icon Button supports keyboard interaction

Keyboard interaction is part of the contract.

Icon Button exposes a visible or accessible label

Missing a guaranteed visible label or accessible name.

Icon Button uses semantic HTML

Native elements and landmarks are specified.

Icon Button defines a disabled state

Disabled behavior is specified.

Icon Button meets recommended touch target size

Compact size falls below the recommended touch target.

Button Group has a visible focus state

Focus ring is documented and implemented.

Button Group supports keyboard interaction

Keyboard interaction is part of the contract.

Button Group exposes a visible or accessible label

Labeling is specified.

Button Group uses semantic HTML

Native elements and landmarks are specified.

Button Group defines a disabled state

Disabled behavior is specified.

Button Group meets recommended touch target size

Default size meets 24–44px guidance for the control.

Input has a visible focus state

Focus ring is documented and implemented.

Input supports keyboard interaction

Keyboard interaction is part of the contract.

Input exposes a visible or accessible label

Missing a guaranteed visible label or accessible name.

Input uses semantic HTML

Native elements and landmarks are specified.

Input defines a disabled state

Disabled behavior is specified.

Input meets recommended touch target size

Default size meets 24–44px guidance for the control.

Select has a visible focus state

Focus ring is documented and implemented.

Select supports keyboard interaction

Keyboard interaction is part of the contract.

Select exposes a visible or accessible label

Labeling is specified.

Select uses semantic HTML

Native elements and landmarks are specified.

Select defines a disabled state

Disabled behavior is specified.

Select meets recommended touch target size

Default size meets 24–44px guidance for the control.

Checkbox has a visible focus state

Focus ring is documented and implemented.

Checkbox supports keyboard interaction

Keyboard interaction is part of the contract.

Checkbox exposes a visible or accessible label

Labeling is specified.

Checkbox uses semantic HTML

Native elements and landmarks are specified.

Checkbox defines a disabled state

Disabled behavior is specified.

Checkbox meets recommended touch target size

Default size meets 24–44px guidance for the control.

Radio has a visible focus state

Focus ring is documented and implemented.

Radio supports keyboard interaction

Keyboard interaction is part of the contract.

Radio exposes a visible or accessible label

Labeling is specified.

Radio uses semantic HTML

Native elements and landmarks are specified.

Radio defines a disabled state

Disabled behavior is specified.

Radio meets recommended touch target size

Default size meets 24–44px guidance for the control.

Switch has a visible focus state

Focus ring is documented and implemented.

Switch supports keyboard interaction

Keyboard interaction is part of the contract.

Switch exposes a visible or accessible label

Labeling is specified.

Switch uses semantic HTML

Native elements and landmarks are specified.

Switch defines a disabled state

Disabled behavior is specified.

Switch meets recommended touch target size

Default size meets 24–44px guidance for the control.

Textarea has a visible focus state

Focus ring is documented and implemented.

Textarea supports keyboard interaction

Keyboard interaction is part of the contract.

Textarea exposes a visible or accessible label

Labeling is specified.

Textarea uses semantic HTML

Native elements and landmarks are specified.

Textarea defines a disabled state

Disabled behavior is specified.

Textarea meets recommended touch target size

Default size meets 24–44px guidance for the control.

Navbar has a visible focus state

Focus ring is documented and implemented.

Navbar supports keyboard interaction

Keyboard interaction is part of the contract.

Navbar exposes a visible or accessible label

Labeling is specified.

Navbar uses semantic HTML

Native elements and landmarks are specified.

Navbar defines a disabled state

Disabled behavior is specified.

Navbar meets recommended touch target size

Default size meets 24–44px guidance for the control.

Sidebar has a visible focus state

Focus ring is documented and implemented.

Sidebar supports keyboard interaction

Keyboard interaction is part of the contract.

Sidebar exposes a visible or accessible label

Labeling is specified.

Sidebar uses semantic HTML

Native elements and landmarks are specified.

Sidebar defines a disabled state

Disabled behavior is specified.

Sidebar meets recommended touch target size

Default size meets 24–44px guidance for the control.

Tabs has a visible focus state

Focus ring is documented and implemented.

Tabs supports keyboard interaction

Keyboard interaction is part of the contract.

Tabs exposes a visible or accessible label

Labeling is specified.

Tabs uses semantic HTML

Native elements and landmarks are specified.

Tabs defines a disabled state

Disabled behavior is specified.

Tabs meets recommended touch target size

Default size meets 24–44px guidance for the control.

Breadcrumb has a visible focus state

Focus ring is documented and implemented.

Breadcrumb supports keyboard interaction

Keyboard interaction is part of the contract.

Breadcrumb exposes a visible or accessible label

Labeling is specified.

Breadcrumb uses semantic HTML

Native elements and landmarks are specified.

Breadcrumb defines a disabled state

Disabled behavior is specified.

Breadcrumb meets recommended touch target size

Default size meets 24–44px guidance for the control.

Alert has a visible focus state

Focus ring is documented and implemented.

Alert supports keyboard interaction

Keyboard interaction is part of the contract.

Alert exposes a visible or accessible label

Labeling is specified.

Alert uses semantic HTML

Native elements and landmarks are specified.

Alert defines a disabled state

Disabled behavior is specified.

Alert meets recommended touch target size

Default size meets 24–44px guidance for the control.

Toast has a visible focus state

Focus ring is documented and implemented.

Toast supports keyboard interaction

Keyboard interaction is part of the contract.

Toast exposes a visible or accessible label

Labeling is specified.

Toast uses semantic HTML

Native elements and landmarks are specified.

Toast defines a disabled state

Disabled behavior is specified.

Toast meets recommended touch target size

Default size meets 24–44px guidance for the control.

Modal has a visible focus state

Focus ring is documented and implemented.

Modal supports keyboard interaction

Keyboard interaction is part of the contract.

Modal exposes a visible or accessible label

Labeling is specified.

Modal uses semantic HTML

Native elements and landmarks are specified.

Modal defines a disabled state

Disabled behavior is specified.

Modal meets recommended touch target size

Default size meets 24–44px guidance for the control.

Tooltip has a visible focus state

Focus ring is documented and implemented.

Tooltip supports keyboard interaction

Keyboard support is incomplete — hover-only behavior is a risk.

Tooltip exposes a visible or accessible label

Labeling is specified.

Tooltip uses semantic HTML

Native elements and landmarks are specified.

Tooltip defines a disabled state

Disabled behavior is specified.

Tooltip meets recommended touch target size

Default size meets 24–44px guidance for the control.

Card has a visible focus state

Focus ring is documented and implemented.

Card supports keyboard interaction

Keyboard interaction is part of the contract.

Card exposes a visible or accessible label

Labeling is specified.

Card uses semantic HTML

Native elements and landmarks are specified.

Card defines a disabled state

Disabled behavior is specified.

Card meets recommended touch target size

Default size meets 24–44px guidance for the control.

Badge has a visible focus state

Focus ring is documented and implemented.

Badge supports keyboard interaction

Keyboard interaction is part of the contract.

Badge exposes a visible or accessible label

Labeling is specified.

Badge uses semantic HTML

Native elements and landmarks are specified.

Badge defines a disabled state

Disabled behavior is specified.

Badge meets recommended touch target size

Compact size falls below the recommended touch target.

Avatar has a visible focus state

Focus ring is documented and implemented.

Avatar supports keyboard interaction

Keyboard interaction is part of the contract.

Avatar exposes a visible or accessible label

Labeling is specified.

Avatar uses semantic HTML

Native elements and landmarks are specified.

Avatar defines a disabled state

Disabled behavior is specified.

Avatar meets recommended touch target size

Compact size falls below the recommended touch target.

Table has a visible focus state

Focus ring is documented and implemented.

Table supports keyboard interaction

Keyboard interaction is part of the contract.

Table exposes a visible or accessible label

Missing a guaranteed visible label or accessible name.

Table uses semantic HTML

Native elements and landmarks are specified.

Table defines a disabled state

Disabled behavior is specified.

Table meets recommended touch target size

Default size meets 24–44px guidance for the control.