skills.rest
thrillmade
thrillmadeOFFICIAL
Explore all skills by this author →
GitHub

apca-contrast

Calculate APCA lightness contrast for text-on-surface accessibility.

1|Updated May 15, 2026
Search Tags:#accessibility#WCAG#contrast#color#APCA
One-click install
npx skills add https://github.com/thrillmade/agent-skills --skill apca-contrast
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apca-contrast
Source: https://github.com/thrillmade/agent-skills/tree/main/skills/apca-contrast
Command: npx skills add https://github.com/thrillmade/agent-skills --skill apca-contrast

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires apcach, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps in selecting appropriate text-on-surface contrast for accessibility, auditing contrast budgets, and generating colors against specific contrast targets, ensuring compliance with APCA and WCAG 2.2 AA standards.

Core Features & Use Cases

  • APCA Contrast Calculation: Calculates Lc (lightness contrast) on a 0–105+ scale for text-on-surface contrast.
  • Palette Generation: Generates palettes targeting specific Lc bands for consistent readability.
  • Code Review: Flags contrast picks using WCAG 2.x as the primary model instead of APCA.
  • Use Case: When designing a user interface, use this Skill to check the contrast of text elements against their background to ensure accessibility.

Quick Start

Generate a color with Lc 75 contrast against a white background using the apca-contrast skill.

Frequently Asked Questions about apca-contrast

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

FAQPage Schema
How do I calculate text-on-surface contrast using APCA?▼

APCA contrast is calculated by computing lightness contrast (Lc) on a 0–105+ scale for text-on-surface pairs, providing an accurate perceptual contrast measurement for UI design and accessibility audits.

What is the difference between APCA Lc values and WCAG contrast ratios?▼

APCA Lc values differ from WCAG contrast ratios by modeling perceptual lightness contrast specifically for text-on-surface, whereas WCAG uses a simpler ratio. This Skill flags WCAG-only picks to encourage APCA compliance for better readability.

How do I generate a color palette that meets specific APCA contrast targets?▼

You can generate a color palette targeting specific Lc bands by providing a background color and desired contrast level. This ensures consistent readability across UI elements while maintaining APCA and WCAG 2.2 AA compliance.

Do I need the apcach library to calculate APCA contrast?▼

Yes, the apcach library is required as a dependency to perform inverse composition and calculate APCA lightness contrast, enabling accurate Lc value generation and palette creation for accessibility auditing.

When should I use APCA over standard WCAG contrast models for accessibility?▼

Use APCA over standard WCAG contrast models when designing user interfaces, as it provides a more perceptually accurate lightness contrast calculation for text-on-surface, ensuring optimal readability and WCAG 2.2 AA compliance.

Related Skills

Explore More Design & Creative Skills→
thrillmadethrillmade
1

oklch-color-space

Generate OKLCH colors meeting APCA contrast targets for design tokens.

Official
Advanced
luissimon96luissimon96

graph-accessibility

Audit UI components against WCAG 2.2 AA accessibility standards.

Community
Advanced
legoutlegout
3

creating-streamlit-themes

Configure Streamlit themes via native settings in config.toml.

Community
Intermediate
anthrilanthril
3

color-palette

Generate accessible brand color systems with WCAG-validated contrast and JSON output.

Official
Advanced