artisanpack-ui/accessibility

A package for all accessibility functions for ArtisanPack UI.

Installs: 347

Dependents: 4

Suggesters: 0

Security: 0

Stars: 0

Forks: 0

pkg:composer/artisanpack-ui/accessibility

2.0.0 2025-11-10 22:35 UTC

README

A PHP package for ensuring web applications meet accessibility standards, particularly for color contrast.

Features

  • Color Contrast Checking: Determine if text colors have sufficient contrast against background colors
  • Accessible Text Color Generation: Generate accessible text colors based on background colors
  • Color Format Support: Support for hex, Tailwind CSS, rgb(), and hsl() color formats.
  • User Accessibility Settings: Manage user preferences for accessibility features
  • Laravel Integration: Seamless integration with Laravel applications

Installation

You can install the package via Composer:

composer require artisanpack-ui/accessibility

For detailed installation instructions, including Laravel integration, see the Getting Started Guide.

Usage

Here is a practical, real-world example of how to use the package to create an accessible button component in Laravel.

Creating an Accessible Button Component

1. Create a new Blade component:

php artisan make:component Button

2. Modify the component class:

In app/View/Components/Button.php, we'll accept a background color and automatically determine the correct text color.

// app/View/Components/Button.php

namespace App\View\Components;

use Illuminate\View\Component;

class Button extends Component
{
    public string $bgColor;
    public string $textColor;

    public function __construct(string $bgColor = '#3b82f6')
    {
        $this->bgColor = $bgColor;
        $this->textColor = a11yGetContrastColor($this->bgColor);
    }

    public function render()
    {
        return view('components.button');
    }
}

3. Update the component view:

In resources/views/components/button.blade.php, we'll apply the colors as inline styles.

// resources/views/components/button.blade.php

@props(['bgColor', 'textColor'])

<button {{ $attributes->merge(['class' => 'px-4 py-2 rounded']) }} style="background-color: {{ $bgColor }}; color: {{ $textColor }};">
    {{ $slot }}
</button>

4. Use the component in your views:

Now you can easily create accessible buttons with any background color.

<x-button>Click Me</x-button>

<x-button bg-color="#dc2626">Delete</x-button>

<x-button bg-color="rgb(16, 185, 129)">Success</x-button>

For more detailed examples, including Livewire components and dynamic theming, see the Real-World Examples documentation.

Documentation

For complete documentation, please visit the links below.

Requirements

  • PHP 8.2 or higher
  • Laravel 5.3 or higher (for Laravel integration)

Contributing

As an open source project, this package is open to contributions from anyone. Please read through the contributing guidelines to learn more about how you can contribute to this project.

License

This package is open-sourced software licensed under the GPL-3.0-or-later license.