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