skills.rest
LionGab
LionGabCOMMUNITY
Explore all skills by this author →
GitHub

accessibility-checker

Validates WCAG AAA accessibility compliance for touch targets, contrast ratios, and interactive labels in apps.

Updated Aug 27, 2026
Search Tags:#accessibility#a11y#wcag#contrast#react-native
One-click install
npx skills add https://github.com/LionGab/NossaMaternidade-2 --skill accessibility-checker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-checker
Source: https://github.com/LionGab/NossaMaternidade-2/tree/main/.claude/skills/accessibility-checker
Command: npx skills add https://github.com/LionGab/NossaMaternidade-2 --skill accessibility-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure the app meets WCAG AAA accessibility standards by validating touch targets, color contrast, and labeling for interactive elements.

Core Features & Use Cases

  • Touch targets & hit areas: Enforce minimum sizes (44pt / 48dp).
  • Color contrast: Verify text and icons meet required contrast ratios.
  • Accessibility labels: Require labels and proper roles for interactive components.
  • Pattern-based checks: Use Grep rules to identify common accessibility gaps.

Quick Start

Run the accessibility checker on a screen to identify and fix accessibility issues before release.

Frequently Asked Questions about accessibility-checker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate WCAG AAA accessibility compliance for React Native apps?▼

WCAG AAA compliance validation checks touch targets (44pt minimum), color contrast (7:1 ratio), and accessible labels for interactive elements. This Skill enforces these technical requirements during UI development to ensure your app meets the strictest accessibility standards before release.

What's the minimum touch target size for accessible mobile UI?▼

Touch targets must meet a 44pt minimum size (48dp) to be accessible. This Skill validates that interactive elements in your React Native app comply with this requirement, preventing users with motor impairments from struggling to tap controls.

How do I check color contrast ratios in my mobile app UI?▼

Color contrast validation ensures text and icons meet a 7:1 ratio for WCAG AAA compliance. This Skill automatically verifies contrast during screen validation, catching readability issues that affect users with low vision.

Do I need accessible labels and roles for all interactive components?▼

Yes. Interactive elements require accessibilityLabel, aria roles, and accessibilityState to be accessible. This Skill enforces proper labeling and semantic markup so screen readers can convey element purpose and state to users with visual impairments.

Can I use pattern-based checks to find accessibility gaps automatically?▼

Yes. This Skill uses Grep rules to identify common accessibility gaps in your codebase, enabling fast detection of touch target, contrast, and labeling issues across multiple screens without manual review.

What accessibility requirements apply to images in mobile apps?▼

Images require proper accessibility semantics—alt text or accessible labels—so screen reader users understand their content. This Skill validates image accessibility to ensure your app is usable for all users.

Related Skills

Explore More Design & Creative Skills→
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate
kimmyxpowkimmyxpow

wcag-audit-patterns

Identify and remediate WCAG 2.2 accessibility violations with automated testing and checklists.

Community
Advanced
unnamedmistressunnamedmistress

ux-ui-designer

Design mobile-first interfaces with WCAG AA contrast and 8pt spacing.

Community
Intermediate
bizoton19bizoton19

508-audit

Audit federal websites for WCAG 2.1 AA accessibility compliance.

Community
Advanced