color-contrast

Name: color-contrast
Author: mgifford

27stars2forks

How to install color-contrast?

mgifford/accessibility-skills/color-contrast

$npx -y skills add mgifford/accessibility-skills --skill color-contrast

Installs into the current project.

Summary

Load this skill whenever the project contains text, UI components, icons, form controls, data visualisations, or focus indicators — in short, almost every project. Under no circumstances hard-code colour values without verifying contrast ratios. Absolutely always ensure text meet

Files · 1

View on GitHub

SKILL.md

1	# Color Contrast Accessibility Skill
2
3	> Canonical source: `examples/COLOR_CONTRAST_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md`
4	> This skill is derived from that file. When in doubt, the example is authoritative.
5
6	Apply these rules whenever implementing or reviewing colour choices in HTML, CSS,
7	SVG, or any visual interface element.
8
9	---
10
11	## Core Mandate
12
13	Sufficient contrast between foreground and background colors is a prerequisite
14	for users to read text, identify UI components, perceive graphical content, and
15	track keyboard focus. **Color alone must never be the sole means of conveying
16	information.** Contrast depends on the colors actually adjacent after opacity,
17	gradients, images, overlays, states, and themes are applied — a passing palette
18	is not proof the finished interface passes.
19
20	All visual interface elements that convey information or require user interaction
21	must meet WCAG 2.2 Level AA contrast thresholds in **light mode, dark mode, and
22	forced-colors (high contrast) mode**.
23
24	---
25
26	## Severity Scale (this skill)
27
28	\| Level \| Meaning \|
29	\| --- \| --- \|
30	\| Critical \| Contrast failure makes content or interaction completely inaccessible \|
31	\| Serious \| Contrast failure significantly impairs access for a disability group \|
32	\| Moderate \| Contrast issue degrades usability but content remains partially accessible \|
33	\| Minor \| Best-practice gap; marginal impact \|
34
35	Prioritize by user impact when time is limited: (1) text/controls required to
36	complete a task, (2) keyboard focus indicators and component states, (3)
37	errors/warnings/required fields/status messages, (4) navigation/links/labels,
38	(5) charts and information-bearing graphics, (6) supporting/secondary content.
39
40	---
41
42	## Critical: Text Contrast (WCAG 1.4.3)
43
44	\| Text type \| Minimum (AA) \| Enhanced (AAA) \|
45	\| --- \| :---: \| :---: \|
46	\| Normal text (below 18pt / 14pt bold) \| 4.5:1 \| 7:1 \|
47	\| Large text (18pt+ or 14pt+ bold) \| 3:1 \| 4.5:1 \|
48	\| Logotypes / purely decorative text \| Exempt \| Exempt \|
49	\| Disabled controls \| Exempt \| Exempt \|
50
51	"Large text" means 18pt (≈ 24 CSS `px`) or larger at normal weight, or
52	14pt (≈ 18.67 CSS `px`) or larger in bold. WCAG thresholds are pass/fail — do
53	not round 4.499:1 up to 4.5:1. Treat thin or unusual typefaces cautiously — a
54	combination can meet the computed threshold but stay hard to read due to
55	narrow strokes.
56
57	The requirement covers body text, headings, link text, button/form labels,
58	placeholder text, text revealed on hover/focus, validation/status
59	messages, and text rendered as an image. Do not extend the logotype/decorative
60	exception to brand colors used for ordinary content.
61
62	If CSS specifies only a foreground or only a background, the other side may
63	come from an unknown user preference — always specify both sides of a color pair:
64
65	```css
66	html { background: #ffffff; color: #1b1f23; }
67	.notice { background: #f2f6fa; color: #243447; }
68	```
69
70	```css
71	/* Bad — fails 1.4.3 */
72	.placeholder { color: #aaaaaa; }
73	.note { color: #888; }
74	```
75
76	Prefer real text over images of text (WCAG 1.4.5) — it reflows, resizes, and
77	adapts to themes; use an image of text only when the presentation is
78	customizable or essential.
79
80	---
81
82	## Serious: Non-text Contrast (WCAG 1.4.11)
83
84	Visual information needed to identify a UI component or its state, and parts
85	of a graphic needed to understand it, need 3:1 contrast against adjacent
86	colors. Examples: a checkbox boundary that identifies the control, a check
87	mark communicating checked state, an icon in an icon-only button, a slider
88	thumb/track, an error boundary, and chart lines/sectors/symbols needed to
89	read it.
90
91	This does not mean every decorative border must hit 3:1 — if text, shape,
92	position, or another treatment already identifies the component/state, a
93	low-contrast decorative border isn't necessarily the required information.
94	Does not apply to: purely decorative graphics, inactive/disabled components,
95	logos/brand marks, or graphics supplementary to adjacent text.
96
97	Native controls are a strong default — browsers/OS adapt them to user
98	preferences; replacing them creates responsibility for every state and mode:
99
100	```css
101	.checkbox {
102	appearance: none;
103	inline-size: 1.25rem;
104	block-size: 1.25rem;
105	border: 2px solid #59636e; /* test against surrounding background */
106	border-radius: 0.2rem;
107	}
108	.checkbox:checked {
109	border-color: #005ea8;
110	background-color: #005ea8;
111	}
112	```
113
114	Test the unchecked boundary against its background, the checked fill against
115	the surrounding background,

People who liked this also viewed

6 picks

Type

color-contrast

27stars2forks

View on GitHub

How to install color-contrast?

mgifford/accessibility-skills/color-contrast

$npx -y skills add mgifford/accessibility-skills --skill color-contrast

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Color Contrast Accessibility Skill
2
3	> Canonical source: `examples/COLOR_CONTRAST_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md`
4	> This skill is derived from that file. When in doubt, the example is authoritative.
5
6	Apply these rules whenever implementing or reviewing colour choices in HTML, CSS,
7	SVG, or any visual interface element.
8
9	---
10
11	## Core Mandate
12
13	Sufficient contrast between foreground and background colors is a prerequisite
14	for users to read text, identify UI components, perceive graphical content, and
15	track keyboard focus. **Color alone must never be the sole means of conveying
16	information.** Contrast depends on the colors actually adjacent after opacity,
17	gradients, images, overlays, states, and themes are applied — a passing palette
18	is not proof the finished interface passes.
19
20	All visual interface elements that convey information or require user interaction
21	must meet WCAG 2.2 Level AA contrast thresholds in **light mode, dark mode, and
22	forced-colors (high contrast) mode**.
23
24	---
25
26	## Severity Scale (this skill)
27
28	\| Level \| Meaning \|
29	\| --- \| --- \|
30	\| Critical \| Contrast failure makes content or interaction completely inaccessible \|
31	\| Serious \| Contrast failure significantly impairs access for a disability group \|
32	\| Moderate \| Contrast issue degrades usability but content remains partially accessible \|
33	\| Minor \| Best-practice gap; marginal impact \|
34
35	Prioritize by user impact when time is limited: (1) text/controls required to
36	complete a task, (2) keyboard focus indicators and component states, (3)
37	errors/warnings/required fields/status messages, (4) navigation/links/labels,
38	(5) charts and information-bearing graphics, (6) supporting/secondary content.
39
40	---
41
42	## Critical: Text Contrast (WCAG 1.4.3)
43
44	\| Text type \| Minimum (AA) \| Enhanced (AAA) \|
45	\| --- \| :---: \| :---: \|
46	\| Normal text (below 18pt / 14pt bold) \| 4.5:1 \| 7:1 \|
47	\| Large text (18pt+ or 14pt+ bold) \| 3:1 \| 4.5:1 \|
48	\| Logotypes / purely decorative text \| Exempt \| Exempt \|
49	\| Disabled controls \| Exempt \| Exempt \|
50
51	"Large text" means 18pt (≈ 24 CSS `px`) or larger at normal weight, or
52	14pt (≈ 18.67 CSS `px`) or larger in bold. WCAG thresholds are pass/fail — do
53	not round 4.499:1 up to 4.5:1. Treat thin or unusual typefaces cautiously — a
54	combination can meet the computed threshold but stay hard to read due to
55	narrow strokes.
56
57	The requirement covers body text, headings, link text, button/form labels,
58	placeholder text, text revealed on hover/focus, validation/status
59	messages, and text rendered as an image. Do not extend the logotype/decorative
60	exception to brand colors used for ordinary content.
61
62	If CSS specifies only a foreground or only a background, the other side may
63	come from an unknown user preference — always specify both sides of a color pair:
64
65	```css
66	html { background: #ffffff; color: #1b1f23; }
67	.notice { background: #f2f6fa; color: #243447; }
68	```
69
70	```css
71	/* Bad — fails 1.4.3 */
72	.placeholder { color: #aaaaaa; }
73	.note { color: #888; }
74	```
75
76	Prefer real text over images of text (WCAG 1.4.5) — it reflows, resizes, and
77	adapts to themes; use an image of text only when the presentation is
78	customizable or essential.
79
80	---
81
82	## Serious: Non-text Contrast (WCAG 1.4.11)
83
84	Visual information needed to identify a UI component or its state, and parts
85	of a graphic needed to understand it, need 3:1 contrast against adjacent
86	colors. Examples: a checkbox boundary that identifies the control, a check
87	mark communicating checked state, an icon in an icon-only button, a slider
88	thumb/track, an error boundary, and chart lines/sectors/symbols needed to
89	read it.
90
91	This does not mean every decorative border must hit 3:1 — if text, shape,
92	position, or another treatment already identifies the component/state, a
93	low-contrast decorative border isn't necessarily the required information.
94	Does not apply to: purely decorative graphics, inactive/disabled components,
95	logos/brand marks, or graphics supplementary to adjacent text.
96
97	Native controls are a strong default — browsers/OS adapt them to user
98	preferences; replacing them creates responsibility for every state and mode:
99
100	```css
101	.checkbox {
102	appearance: none;
103	inline-size: 1.25rem;
104	block-size: 1.25rem;
105	border: 2px solid #59636e; /* test against surrounding background */
106	border-radius: 0.2rem;
107	}
108	.checkbox:checked {
109	border-color: #005ea8;
110	background-color: #005ea8;
111	}
112	```
113
114	Test the unchecked boundary against its background, the checked fill against
115	the surrounding background,

People who liked this also viewed

6 picks

Type