HomeColor Systems
Preview
css
AA
4.5:1
AAA
7:1
FAIL
2.1:1
Code
css
/* WCAG AA -> min contrast 4.5:1 (normal text) */
/* WCAG AAA → min contrast 7:1   (normal text) */

/* ✅ AAA compliant combinations */
.text-on-white  { color: #1C1A17; } /* 16.8:1 */
.text-on-light  { color: #3A3836; } /* 10.2:1 */
.accent-on-white { color: #8A3A06; } /* 7.1:1 */

/* ✅ AA compliant */
.accent-normal  { color: #C4640A; } /* 4.6:1 on white */

/* ❌ Insufficient (avoid) */
/* color: #E8A050 on white → 2.4:1 */
Related Blocks
css
Brand Color System
A complete hierarchy for primary, secondary, and accent colors.
css
Dark Mode Pair
Color pairs that switch automatically for light and dark mode.
css
Gradient Library
8 ready gradient combinations for hero and card backgrounds.