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

Full version — $168 once: all 7 components and 22 variants as a Figma plugin, 22 SVGs and one .sketch file. Get the full kit

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.

Get the full version $168

7 dashboard components, 22 variants, every text/fill pair at 4.5:1 or higher (lowest 5.91:1) — the contrast line EN 301 549 takes from WCAG 2.1, and Germany's BFSG fines up to €100,000

One payment, one licence key for this tool. The key is shown right after payment.

WCAG 2.1 SC 1.4.3 requires 4.5:1 contrast for normal text and SC 1.4.11 requires 3:1 for UI components; EN 301 549, the EAA harmonised standard, references WCAG 2.1 AA. Germany's BFSG §37 sets fines up to €100,000. Rival dashboard

Buy the full version — $168

Worked example

Real numbers from this tool, line by line.

Dashboard UI Kit — WCAG 2.1 AA Contrast Checked, Figma

Type a sky-blue brand colour, #0EA5E9, into a dashboard kit and put white text on it. The contrast ratio is 2.77:1. WCAG 2.1 success criterion 1.4.3 asks for 4.5:1 on normal text, so that primary button fails. So does every other state that uses the brand colour as a fill: the active status badge, the info alert, the active tab, the running progress bar and the switched-on toggle. In our 22-variant dashboard UI kit that is 6 of 22 states failing from one colour decision.

Why this matters now. The European Accessibility Act has applied since 28 June 2025 to consumer-facing services such as e-commerce and banking. Its harmonised standard, EN 301 549, takes its web contrast rules from WCAG 2.1 AA: 4.5:1 for normal text and 3:1 for user-interface components (success criterion 1.4.11). Enforcement is national. In Germany the BFSG, section 37, sets fines up to €100,000. A pale brand button is the kind of failure an auditor sees in the first minute, because it sits on every screen.

What the kit does about it. The dashboard UI kit ships 7 Figma components: Button, Input, Status badge, Alert, Tabs, Progress and Toggle. Together they have 22 variants. We measured every text and fill pair with the WCAG relative-luminance formula. The lowest pair is Input / Error, dark red text on the light surface, at 5.91:1. The default primary blue, #1D4ED8, gives 6.70:1 with white text. The darkest pairs, near-black on the light surface, reach 16.30:1 and 17.85:1. None of the 22 is below 4.5:1.

The kit comes three ways, because Figma's own .fig format has no public writer. First, a Figma plugin in TypeScript source that builds the 7 components as real variant sets; it type-checks against Figma's own plugin typings. Second, 22 SVG files that paste into a frame as editable vectors. Third, one .sketch file that Figma opens when you drag it in, and that Sketch users open directly. Some component structure may be simplified in the .sketch import; the plugin keeps real variants.

Your brand colour is where most kits break. The free checker on the product page takes your hex code and re-measures all 22 variants with it. With #0EA5E9 it reports 6 failures and proposes #0B7DB1, the nearest shade that is 24 percent darker and reaches 4.58:1 with white. With an orange such as #FF6B00 it reports 2.86:1 and proposes #C75300. With a teal such as #0B7A75 it reports zero failures and a lowest pair of 5.18:1, so you can keep your colour as it is. Three brands, three different answers, all from the same formula.

After you pick a shade, the swap takes one step in Figma: select the kit, open Selection colors and replace #1D4ED8 with your checked shade. Menu names differ by Figma version and UI language.

What the kit does not do. Contrast is one requirement among many. Keyboard access, focus order, visible focus and screen-reader labels are still your build's job, and no design file can prove them. What the kit gives you is a palette where the contrast question is already answered for every dashboard state, with the ratio next to each variant, so an accessibility reviewer can check your numbers instead of re-measuring them.

Free and paid are cut on scope. The free part is the Button set with all four variants, Primary, Secondary, Danger and Disabled, as plugin, SVG and .sketch, plus the checker that tests your brand across the whole kit on screen. Once your buttons pass, the rest of the screen has to match them. That is the full kit: Input, Status badge, Alert, Tabs, Progress and Toggle, 18 more variants in the same measured palette. One payment, not a subscription.

Questions people ask

What does this dashboard UI kit contain?

Seven Figma components for a dashboard screen — Button, Input, Status badge, Alert, Tabs, Progress and Toggle — in 22 variants. Every text and fill pair measures at least 4.5:1, the WCAG 2.1 SC 1.4.3 line for normal text; the lowest pair is 5.91:1. It ships as a Figma plugin, 22 SVG files and one .sketch file.

Who is this kit built for?

Product designers and front-end leads building customer-facing SaaS, banking or e-commerce account dashboards for EU consumers. The European Accessibility Act has applied since 28 June 2025, and EN 301 549 takes its contrast rules from WCAG 2.1 AA. Sketch users open the same .sketch file, so mixed teams can share one kit.

Why not use a free Figma Community dashboard kit?

Free kits ship colours nobody measured against 4.5:1, so you find out in an audit that grey placeholder text or a pale badge fails. A contrast checker tests one pair at a time. This kit has all 22 states measured, with the ratio printed per variant, so you only have to recheck your own brand shade.

What do I get for free?

The Button set with four variants (Primary, Secondary, Danger, Disabled) as plugin, SVG and .sketch, plus the web checker. Type your brand hex and it computes the contrast for all 22 variants and suggests the nearest darker shade that reaches 4.5:1. You see the answer for your own colour before paying anything.

How does the price compare?

The full kit is a one-time payment of $168, not a subscription. Rival dashboard UI kits on the same shelf list at up to $168 in our 2026 measurement, without per-variant contrast figures. Germany's BFSG §37 sets fines up to €100,000 for accessibility breaches, and contrast is the most visible of those requirements.

Ask about this tool

One question, answered by the person who built it. Your email only if you want the answer sent.