WCAG, 508, dark mode, forms, and data visualization
Color Accessibility Hub
Most accessibility problems are not caused by one bad color. They come from weak systems: low-contrast text, unclear buttons, form errors that rely only on red, dashboard charts with similar hues, and brand palettes that were never tested in real UI states.
Text and buttons
Check body copy, muted labels, hover states, focus rings, and disabled controls.
Read text contrast guide βDashboards and charts
Use contrast, labels, patterns, and safe hue spacing for real dashboards.
Read chart guide βRecommended reading path
Accessibility
WCAG Contrast Ratio for Text
Pick accessible text and background pairs with a practical contrast budget, brand examples, and copy-ready testing code.
Accessibility
WCAG Contrast Checker for Buttons
Design accessible button color pairs that pass WCAG checks across default, hover, disabled, and focus states.
Accessibility
WCAG Contrast Checker for Dark Mode
Test dark mode text, buttons, and surface pairs against WCAG contrast targets with brand examples and copy-ready code.
Accessibility
Color Accessibility Guidelines
Learn about color accessibility guidelines β WCAG compliance made practical.
Color Palettes
Color Blind Friendly Palettes
Learn about color blind friendly palettes β design choices that work for everyone.
Accessibility
High Contrast Color Combinations
Learn about high contrast color combinations β bold designs that still pass WCAG.
Accessibility
Form Validation Color Accessibility Guide
Design form validation colors that users can understand without relying on red alone β accessible error states, success states, helper text, and contrast checks.
Accessibility
Accessible Color Token System for Product Teams
Build color tokens that stay readable across light mode, dark mode, charts, states, and brand themes without slowing product teams down.
Accessibility
Accessible Data Visualization
Design charts, graphs, and dashboards that communicate clearly to people with color vision deficiency β patterns, labels, and contrast strategies that actually work.
Design Tips
Dashboard Color Palette Guide
Design dashboard color palettes that make metrics, charts, alerts, and dark mode easier to read without turning the screen into a rainbow.
Technical
Data Visualization Color Guide
Best color practices for charts, graphs, dashboards, and data storytelling β make your data readable and beautiful.
Fast WCAG checklist before shipping
- β’ Body text clears 4.5:1 minimum, preferably 7:1 for long reading.
- β’ Large headings clear 3:1, but thin fonts get tested like normal text.
- β’ Buttons pass in default, hover, active, disabled, and focus states.
- β’ Error messages use text, icons, and layout cues, not red alone.
- β’ Charts use labels, patterns, and safe spacing, not only hue differences.
- β’ Dark mode has its own token set instead of inverted light-mode colors.