Accessibility - v2.0

ArtisanPack UI Accessibility Documentation

Welcome to the documentation for the ArtisanPack UI Accessibility package. This documentation will help you get started with the package and provide detailed information about its features and usage.

Documentation Contents

Guides

Complete guides to help you get started and effectively use the package:

Getting Started: Installation and basic setup instructions
Usage Guide: Detailed examples of how to use the package's features
Artisan Commands: Using CLI to audit colors and generate palettes

Reference

Comprehensive technical documentation and references:

API Reference: Complete reference for all classes, methods, and functions
Tailwind Colors Reference: Complete list of supported Tailwind CSS color names

Guidelines

Best practices and guidelines for accessible development:

AI Guidelines: Guidelines for AI systems generating accessible UI components

Overview

The ArtisanPack UI Accessibility package provides tools for ensuring your web applications meet accessibility standards, particularly for color contrast. It includes:

Color Contrast Utilities: Methods to determine if text colors have sufficient contrast against background colors
Accessible Text Color Generation: Generate accessible text colors based on background colors
Tailwind CSS Integration: Support for Tailwind CSS color names
User Accessibility Settings: Manage user preferences for accessibility features
Laravel Integration: Seamless integration with Laravel applications

Quick Start

Installation

composer require artisanpack-ui/accessibility

Basic Usage

// Check if text should be black or white on a background
$textColor = a11yCSSVarBlackOrWhite('#3b82f6'); // Returns 'black' or 'white'

// Generate an accessible text color for a background
$accessibleColor = generateAccessibleTextColor('#3b82f6'); // Returns '#000000' or '#FFFFFF'

// Generate a tinted/shaded version that's accessible
$tintedColor = generateAccessibleTextColor('#3b82f6', true); // Returns a tinted/shaded hex color

For more detailed information, please refer to the specific documentation sections linked above.