Mobile app UI kit — is your brand button readable under WCAG 2.2 AA?

For app teams selling to EU consumers (European Accessibility Act, in force for consumer services since 28 June 2025). Type your brand hex. The result updates as you type.

→

Pair	Your colour	Nearest passing shade
White label on the button
Brand text on light surface #F1F5F9 (secondary button)
Hex

Full version — $168 once: all 8 components, 24 variants (.sketch + SVG + Figma plugin)

One payment, not a subscription. The check above and the free button component stay free.

Brand hex Label

WCAG 2.2 AA: normal text needs 4.5:1, large text (24 px, or 18.66 px bold) needs 3:1. Apple asks 44 pt touch targets, Material 48 dp — every button here is 48 px tall.

Free: the Button component, 4 variants

Variant	Text on fill	Contrast
Primary "Continue"	#FFFFFF on #1D4ED8	6.70:1
Secondary "Save draft"	#1D4ED8 on #F1F5F9	6.12:1
Destructive "Delete account"	#FFFFFF on #B91C1C	6.47:1
Disabled "Continue (unavailable)"	#475569 on #F1F5F9	6.92:1

Download: .sketch + 4 SVG + Figma plugin. Paid adds text field, checkbox row, toggle row, tab, alert banner, filter chip and status badge (20 more variants, lowest contrast 5.91:1), with every error state written as "Error:" and every toggle saying On/Off.

How to install: drag the .sketch into Figma, or paste an SVG onto the canvas (editable vectors), or import manifest.json as a development plugin. Some component structure is simplified on import. Sketch users open the same file.

BFSG § 37 (Germany): fines up to €100,000 for a consumer service that breaks the accessibility rules in force since 28 June 2025. This kit covers contrast, touch size and text-labelled states, not a full audit.

Get the full version $168

Mobile app UI kit for apps sold to EU consumers: 8 components, 24 variants, every text/fill pair measured at 4.5:1 or better, 48 px touch targets. BFSG § 37 (Germany): fines up to €100,000.

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

BFSG § 37 (Germany): fines up to €100,000 for a consumer service that breaks the accessibility rules in force since 28 June 2025. WCAG 2.2 AA asks 4.5:1 contrast for normal text; Apple asks 44 pt touch targets, Material 48 dp.

Buy the full version — $168

Worked example

Real numbers from this tool, line by line.

Mobile App UI Kit — Accessible Components for Figma (WCAG 2.2 AA, EAA)

If you ship an iOS or Android app to consumers in the EU, your brand colour is now a compliance question. The European Accessibility Act applies to consumer services since 28 June 2025. In Germany it arrives as the BFSG, and BFSG § 37 (Germany): fines up to €100,000 for a service that breaks those rules. Most of the technical requirements point back to WCAG, and the first one a design file can fail is plain text contrast.

WCAG 2.2 AA asks for a contrast ratio of 4.5:1 for normal-size text and 3:1 for large text. A button label at 16 px is normal text. So the question for your primary button is simple: white label on your brand colour, what is the ratio?

We measured a very common mid-tone blue, #3B82F6. With white text it comes out at 3.68:1. On a light grey surface such as #F1F5F9, used as the label colour of a secondary button, it is 3.36:1. Both are below 4.5:1. The colour looks fine on a bright monitor, which is exactly why it ships.

The fix is rarely a new brand. Keep the hue, lower the lightness until both pairs pass. For #3B82F6 the nearest shade that clears 4.5:1 against white and against #F1F5F9 is #0F66F4, at 4.97:1 on white and 4.53:1 on the surface. A green like #10B981 starts at 2.54:1 and moves to #0B7E58 at 5.07:1. A violet like #7C3AED already sits at 5.70:1 and needs no change. That is what our free page does: type your hex, and it prints these numbers for your colour, in your browser, with no account.

Contrast is one of three things a UI kit can get right before a single screen is built. The second is touch size. Apple asks for hit targets of at least 44 pt; Material asks for 48 dp. WCAG 2.2 adds its own minimum at AA. If every tappable component in the kit is 48 px tall, a designer does not have to remember any of this while laying out a checkout.

The third is state that does not depend on colour. A red border on an email field tells a colour-blind user nothing. In this kit every error variant starts with the word "Error:", and every toggle and checkbox row says On or Off in words.

The kit has 8 components and 24 variants: button, text field, checkbox row, toggle row, tab, alert banner, filter chip and status badge. Each variant's contrast is measured and printed in the README. The lowest pair in the whole kit is error text #B91C1C on #F1F5F9, at 5.91:1. The primary button is 6.70:1.

The Button component with its 4 variants is free: Primary, Secondary, Destructive and Disabled, as SVG, a .sketch file and a Figma plugin. That is enough to put an accessible call to action in your own brand colour on a real screen today.

Figma does not accept outside .fig files, so the kit arrives three ways. Drag the .sketch into Figma to import it. Paste any SVG onto the canvas as editable vectors. Or load the plugin from manifest.json and it draws each variant as a named frame. Some structure is simplified on import: auto layout and Figma variant sets are not rebuilt, and menu names differ by version and language. Sketch users open the same file.

What this does not do: it is not an audit of your app, and it cannot see your screens. It gives you components whose contrast, size and state labels you can check line by line, and a number for your own brand colour before you commit to it.

Questions people ask

What is in this mobile app UI kit?

8 components with 24 variants: button, text field, checkbox row, toggle row, tab, alert banner, filter chip and status badge. Each variant's text/fill contrast is measured (lowest 5.91:1 against the 4.5:1 WCAG 2.2 AA asks for normal text) and every tappable part is 48 px tall. It ships as .sketch, SVG and a Figma plugin.

Who is it for?

Designers and app studios building iOS or Android apps for EU consumers, where the European Accessibility Act applies to consumer services since 28 June 2025. In Germany that law is the BFSG. BFSG § 37 (Germany): fines up to €100,000. Sketch users can open the same file.

Why not use a free UI kit?

Many free kits use a mid-tone brand blue such as #3B82F6, which measures 3.68:1 with white text, below the 4.5:1 WCAG 2.2 AA needs for normal text. The free check moves it to #0F66F4 at 4.97:1 (4.53:1 on the light surface). Free kits also show errors by red alone; this kit writes 'Error:' and On/Off in words.

What is free?

The button component with all 4 variants (Primary 6.70:1, Secondary 6.12:1, Destructive 6.47:1, Disabled 6.92:1) as SVG, .sketch and plugin, plus the web check: type your brand hex and it measures it against white text and a light surface, then finds the nearest darker shade that reaches 4.5:1. No account needed.

What does it cost next to the risk?

$168 once, not a subscription, for 7 more components and 20 more variants. The yardstick is the law, not a rival: BFSG § 37 (Germany): fines up to €100,000 for a consumer service that breaks the accessibility rules in force since 28 June 2025. The kit covers contrast, touch size and text-labelled states, not a full audit.

Ask about this tool

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

Mobile app UI kit — is your brand button readable under WCAG 2.2 AA?

Free: the Button component, 4 variants

Get the full version $168

Find a tool

Worked example

15 seconds — what it actually does

Questions people ask

Ask about this tool

Mobile app UI kit — is your brand button readable under WCAG 2.2 AA?

Free: the Button component, 4 variants

Get the full version $168

Find a tool

Worked example

15 seconds — what it actually does

Questions people ask

Ask about this tool

Same job, next tool