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

Mobile app UI kit — is your brand button readable under WCAG 2.2 AA?
Example of the result this page gives you

Try it free

How it works
  1. Enter your details in the free version below.
  2. See your result right away on this page.
  3. Need more? The full version adds what is listed under "What you get".

What you get: 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. Full version · $168 →

Updated 2026-09-24 · ReadyStack

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.

→

PairYour colourNearest 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.

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

VariantText on fillContrast
Primary "Continue"#FFFFFF on #1D4ED86.70:1
Secondary "Save draft"#1D4ED8 on #F1F5F96.12:1
Destructive "Delete account"#FFFFFF on #B91C1C6.47:1
Disabled "Continue (unavailable)"#475569 on #F1F5F96.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

Need more than this one? ReadyStack Pass opens all 676 files and 556 full versions — $29/month or $199/year. See the Pass →

ENDEJAESPT

Find a tool

· ReadyStack

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.

15 seconds — what it actually does

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.

Same job, next tool

Free in the browser. The full version is a one-time licence.

Healthcare Icon Pack? Start With the Screen — Patient-Safety UI Kit for Figma $168Dashboard UI Kit — WCAG 2.1 AA Contrast Checked, Figma$168Ecommerce Icon Pack UI Kit — Cart, Checkout & Order-Status Components in 32 St$168Web UI Kit for SaaS Dashboards — 8 Components, 32 Variant States (Figma plugin$168Dashboard UI Kit for EU SaaS Billing — VAT ID, Reverse Charge & OSS States (Fi$168Mobile App UI Kit — Account Deletion Flow for App Store 5.1.1(v) & Google Play$168
Email me this result
A copy of what you see above, in your inbox — the tool stays free, nothing here is locked.

For a team or company: for an invoice with your company details, a quote or several licences, write to [email protected].

More in Design & creative assets See all →

Real Estate Listing UI Kit — Property Status Badges, Amenity Chips & Agent Cards (Figma + Sketch + SVG)Real Estate Listing UI Kit — Property Status Badges, Amenity Chips & Agent Cards (Figma + Sketch + SVG)8 live components, 27 variants, and 6 color tokens — swap the tokens once and every listing state repaints in your agency's brand. Works…FreeFull version $168Revit Furniture Families - 14 Plan Blocks at Real Furniture Dimensions + 2010 ADA Clearances (DXF for Revit, AutoCAD, SketchUp)Revit Furniture Families - 14 Plan Blocks at Real Furniture Dimensions + 2010 ADA Clearances (DXF for Revit, AutoCAD, SketchUp)14 furniture blocks drawn to published US mattress, seating and worksurface sizes, plus the two clearance zones the 2010 ADA Standards…FreeFull version $100Shopify Theme for Digital Products — Instant-Download Store for Ebook, Preset and Template SellersShopify Theme for Digital Products — Instant-Download Store for Ebook, Preset and Template SellersA Shopify theme for stores that sell files instead of parcels: 10 sections that answer file format, licence and instant delivery, where a…FreeFull version $2unity 2d キャラクター 素材 — 2D Character Feel Kit (C# only, no sprite art): coyote time, jump buffer, i-frames, hit flash, health bar. 26 Inspector fields, 6 presets, Unity 2021.3+unity 2d キャラクター 素材 — 2D Character Feel Kit (C# only, no sprite art): coyote time, jump buffer, i-frames, hit flash, health bar. 26 Inspector fields, 6 presets, Unity 2021.3+Global Game Jam runs 48 hours. Coyote time, jump buffering, variable jump height, an invincibility window and a hit flash are already…FreeWedding Photographer Presets for Full-Day Bridal, Ceremony and Reception GalleriesWedding Photographer Presets for Full-Day Bridal, Ceremony and Reception Galleries22 Lightroom presets and LUT looks for wedding days that can produce hundreds or thousands of images to cull and edit.FreeBanking UI Kit — EU Verification of Payee Screens (Figma)Banking UI Kit — EU Verification of Payee Screens (Figma)Banking UI kit for Figma: the EU Verification of Payee transfer screens in 8 components and 29 variants. One payment, one licence key for…FreeFull version $198