Testing Color Contrast
Example 1 — High Contrast
Pass
background-color: #ffffff;
color: #1a1a1a;
color: #1a1a1a;
The quick brown fox jumps over the lazy dog.
Contrast ratio: 17.4:1 — Passes WCAG AA & AAA
Example 2 — Low Contrast
Fail
background-color: #ffffff;
color: #aaaaaa;
color: #aaaaaa;
The quick brown fox jumps over the lazy dog.
Contrast ratio: 2.3:1 — Fails WCAG AA
WCAG Requirement: Normal text must have a contrast ratio of at least
4.5:1 (AA) or 7:1 (AAA). Large text (18pt / 14pt bold)
requires at least 3:1 (AA).