WCAG Contrast Checker
This skill checks the color contrast ratio between two colors to ensure they meet WCAG accessibility standards. It accepts colors in various CSS formats (hex, rgb, rgba, hsl, hsla, named colors) and returns the contrast ratio along with compliance levels for normal and large text.
Supported Color Formats
- Hex:
#fff, #ffffff, #333
- RGB:
rgb(255, 0, 0), rgb(51, 51, 51)
- RGBA:
rgba(255, 0, 0, 0.5) (alpha is ignored for contrast calculation)
- HSL:
hsl(120, 100%, 50%)
- HSLA:
hsla(120, 100%, 50%, 0.8) (alpha is ignored)
- Named colors:
white, black, red, blue, lightgray, etc.
WCAG Standards
Level AA (Minimum)
- Normal text (< 18pt or < 14pt bold): Requires 4.5:1 contrast ratio
- Large text (≥ 18pt or ≥ 14pt bold): Requires 3:1 contrast ratio
Level AAA (Enhanced)
- Normal text (< 18pt or < 14pt bold): Requires 7:1 contrast ratio
- Large text (≥ 18pt or ≥ 14pt bold): Requires 4.5:1 contrast ratio
Dependencies
- Python 3.8+
pip install colour>=0.1.5 (for CSS color parsing and manipulation)uv (for running the Python script)
Dependencies are automatically handled by uv run with inline script metadata.
Examples
Check contrast between black text and white background:
uv run --script check_contrast.py --foreground "#000" --background "#fff"
Check contrast using named colors:
uv run --script check_contrast.py --foreground "darkblue" --background "lightgray"
Check contrast using rgb format:
uv run --script check_contrast.py --foreground "rgb(51, 51, 51)" --background "rgb(255, 255, 255)"
Tips
- The tool accepts any valid CSS color format including hex, rgb, rgba, hsl, hsla, and named colors
- WCAG AA requires 4.5:1 for normal text and 3:1 for large text
- WCAG AAA requires 7:1 for normal text and 4.5:1 for large text
- Large text is defined as 18pt+ or 14pt+ bold
Troubleshooting
Invalid Color Format
If you get a color parsing error, ensure your color is in a valid CSS format:
# ✗ Wrong
--foreground "333"
# ✓ Correct
--foreground "#333"
Technical Details
The script implements the WCAG 2.0 contrast ratio formula:
- Relative Luminance Calculation: Converts sRGB values to linear RGB and applies the luminance formula
- Contrast Ratio:
(L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color
- Compliance Check: Compares ratio against WCAG thresholds
1---2name: wcag-contrast-checker3description: Check WCAG color contrast ratios between two colors. Accepts any CSS color format (hex, rgb, rgba, hsl, hsla, named colors) and returns the contrast ratio along with WCAG compliance levels (AA/AAA for normal and large text).4---5
6# WCAG Contrast Checker
7
8This skill checks the color contrast ratio between two colors to ensure they meet WCAG accessibility standards. It accepts colors in various CSS formats (hex, rgb, rgba, hsl, hsla, named colors) and returns the contrast ratio along with compliance levels for normal and large text.
9
10### Supported Color Formats
11
12- **Hex**: `#fff`, `#ffffff`, `#333`
13- **RGB**: `rgb(255, 0, 0)`, `rgb(51, 51, 51)`
14- **RGBA**: `rgba(255, 0, 0, 0.5)` (alpha is ignored for contrast calculation)
15- **HSL**: `hsl(120, 100%, 50%)`
16- **HSLA**: `hsla(120, 100%, 50%, 0.8)` (alpha is ignored)
17- **Named colors**: `white`, `black`, `red`, `blue`, `lightgray`, etc.
18
19## WCAG Standards
20
21### Level AA (Minimum)
22
23- **Normal text** (< 18pt or < 14pt bold): Requires **4.5:1** contrast ratio
24- **Large text** (≥ 18pt or ≥ 14pt bold): Requires **3:1** contrast ratio
25
26### Level AAA (Enhanced)
27
28- **Normal text** (< 18pt or < 14pt bold): Requires **7:1** contrast ratio
29- **Large text** (≥ 18pt or ≥ 14pt bold): Requires **4.5:1** contrast ratio
30
31## Dependencies
32
33- Python 3.8+
34- `pip install colour>=0.1.5` (for CSS color parsing and manipulation)
35- `uv` (for running the Python script)
36
37Dependencies are automatically handled by `uv run` with inline script metadata.
38
39## Examples
40
41Check contrast between black text and white background:
42
43```
44uv run --script check_contrast.py --foreground "#000" --background "#fff"
45```
46
47Check contrast using named colors:
48
49```
50uv run --script check_contrast.py --foreground "darkblue" --background "lightgray"
51```
52
53Check contrast using rgb format:
54
55```
56uv run --script check_contrast.py --foreground "rgb(51, 51, 51)" --background "rgb(255, 255, 255)"
57```
58
59## Tips
60
61- The tool accepts any valid CSS color format including hex, rgb, rgba, hsl, hsla, and named colors
62- WCAG AA requires 4.5:1 for normal text and 3:1 for large text
63- WCAG AAA requires 7:1 for normal text and 4.5:1 for large text
64- Large text is defined as 18pt+ or 14pt+ bold
65
66## Troubleshooting
67
68### Invalid Color Format
69
70If you get a color parsing error, ensure your color is in a valid CSS format:
71
72```bash
73# ✗ Wrong
74--foreground "333"
75
76# ✓ Correct
77--foreground "#333"
78```
79
80## Technical Details
81
82The script implements the WCAG 2.0 contrast ratio formula:
83
841. **Relative Luminance Calculation**: Converts sRGB values to linear RGB and applies the luminance formula
852. **Contrast Ratio**: `(L1 + 0.05) / (L2 + 0.05)` where L1 is the lighter color
863. **Compliance Check**: Compares ratio against WCAG thresholds
majiayu000