Dashboard UI Kit — WCAG 2.1 AA contrast checked, for Figma

For product designers shipping customer-facing dashboards to EU consumers under the European Accessibility Act. Type your brand colour: every one of the kit's 22 variants is re-measured against 4.5:1 right here.

Your brand colour (hex) WCAG 2.1 SC 1.4.3 · normal text needs 4.5:1

Acme Billing

Overview

Customers

Revenue

Component / variant	Fill	Text	Ratio	AA 4.5:1

Free now: the Button set (Primary, Secondary, Danger, Disabled) as plugin, SVG and .sketch — download the free Button set. One-time payment, not a subscription. You see the answer for your own colour above before paying anything.

What you lose if a state fails, and when

The European Accessibility Act has applied to consumer e-commerce, banking and similar services since 28 June 2025. EN 301 549, its harmonised standard, takes the contrast rules from WCAG 2.1 AA: 4.5:1 for normal text (SC 1.4.3), 3:1 for UI components (SC 1.4.11). In Germany the BFSG (§37) sets fines up to €100,000. A pale brand button with white text is the failure an auditor sees first.

Why a free kit or a contrast checker is not enough

A free Figma Community kit ships colours nobody measured against 4.5:1, and a contrast checker tests one pair at a time. This kit has all 22 dashboard states measured with the ratio printed per variant, so the only pair you recheck is your own brand shade — which this page does for you.

What is inside the full kit (counted)

Button	4 variants — Primary, Secondary, Danger, Disabled (free)
Input	3 variants — Placeholder, Filled, Error
Status badge	4 variants — Active, Overdue, Draft, Archived
Alert	3 variants — Info, Error, Neutral
Tabs	3 variants — Active, Inactive, Hover
Progress	3 variants — Running, Complete, Failed
Toggle	2 variants — On, Off

7 components · 22 variants · 6 colour tokens · lowest measured pair 5.91:1 (Input / Error). Contrast only: focus order, keyboard access and screen-reader labels are still your build's job.

How to get it into Figma

Drag the .sketch file onto the Figma file browser to open it. Sketch users open the same file directly.
Copy an SVG and paste it into a frame — it comes in as editable vectors.
Plugin: the kit ships as TypeScript source (code.ts). Run tsc to get code.js, import manifest.json as a development plugin, and it builds the 7 components as real variant sets.
Select the kit, open Selection colors and replace #1D4ED8 with the shade this page gave you.

Menu names differ by Figma version and UI language. Some component structure may be simplified in the .sketch import; the plugin rebuilds real components with variants.

Yardstick

Rival dashboard UI kits on this shelf list at up to $168 (our 2026 shelf measurement), without per-variant contrast figures.