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)
One payment, not a subscription. The check above and the free button component stay free.
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 complete version $168
This page is the working piece. The full pack has everything below.
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.
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.
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.
Same job, next tool
Free in the browser. The full version is a one-time licence.