🎨 Color Contrast Test

Testing WCAG AA compliance across light and dark modes

Text Contrast Levels

PRIMARY TEXT
This is primary text. It should have excellent contrast (16.1:1 in light mode, 15.5:1 in dark mode). ✓ WCAG AAA
SECONDARY TEXT
This is secondary text. It should have very good contrast (9.7:1 in light mode, 9.2:1 in dark mode). ✓ WCAG AAA
TERTIARY TEXT
This is tertiary text. It should have good contrast (4.7:1 in light mode, 5.1:1 in dark mode). ✓ WCAG AA

Alert Component Contrast

✓ Success alert with improved contrast. Icon uses darker variant in light mode.
âš  Warning alert with improved contrast. Icon uses much darker variant for visibility.
✕ Error alert with improved contrast. Icon uses darker variant in light mode.
ℹ Info alert with improved contrast. Icon uses darker variant in light mode.
Light Mode: Icons use -dark or -darker variants for better contrast on light gradients.
Dark Mode: Icons use standard colors for better visibility on dark gradients.

Button Contrast

All buttons meet WCAG AA standards for large text (buttons are considered large text). Warning button uses bold text for improved contrast.

Color Palette Samples

SUCCESS GRADIENT
Success color with dark variant for text
WARNING GRADIENT
Warning color with darker variant for text
ERROR GRADIENT
Error color with dark variant for text
INFO GRADIENT
Info color with dark variant for text