wcag-contrast-checker

WCAG contrast checking calculates the luminance ratio between two colors to ensure legibility. Use this skill by providing foreground and background colors in CSS formats (hex, RGB, HSL, or named colors), and it returns the contrast ratio plus AA/AAA compliance status for normal and large text.

A contrast checker accepts multiple CSS color formats including hexadecimal (#FFF), RGB/RGBA, HSL/HSLA, and named colors (darkblue, lightgray). This flexibility lets you validate colors directly from your design files or stylesheets without conversion.

Run contrast ratio calculations on each text-and-background color pair in your palette. The skill compares each ratio against WCAG AA and AAA thresholds for normal and large text, letting you identify combinations that fail accessibility standards before deployment.

Yes. WCAG defines separate contrast requirements for normal text and large text (18pt or 14pt bold). This skill reports compliance for both sizes, so you can verify that your design meets the appropriate threshold for each text scale.

WCAG AA requires a 4.5:1 contrast ratio for normal text; AAA requires 7:1. Large text has lower thresholds. This skill reports both levels so you can choose the accessibility standard your design needs to meet.

No. Manual calculation is error-prone and slow. This skill automates ratio computation and compliance checks, letting designers and developers verify accessibility in seconds rather than performing tedious calculations by hand.