Color Accessibility
Make colors accessible and text readable for everyone.
Accessible color means text people can read and information that doesn't rely on color alone. These guides explain the WCAG contrast levels, how to put readable text on colors, photos and dark mode, how to design for color blindness, and how to build a UI palette that passes by design.
Guides
- Color AccessibilityColor Contrast and WCAG: A Practical GuideWhat contrast ratios mean, the WCAG AA and AAA levels for text and UI, and how to fix colors that fail without losing your palette.6 min readBeginnerRead the full guide
- Color AccessibilityAccessible Text on Colored Backgrounds, Images and Dark ModeHow to choose black or white text on any color, keep text readable over photos and gradients, and set up dark mode colors that stay comfortable and clear.7 min readIntermediateRead the full guide
- Color AccessibilityHow to Build an Accessible UI Color PaletteBuild a UI palette that passes contrast by design: lightness scales, safe steps for text and borders, semantic colors, and light and dark themes.7 min readIntermediateRead the full guide
- Color AccessibilityDesigning for Color Blindness: Palettes, Patterns and TestingHow the main types of color blindness affect what people see, which color pairs to avoid, safer palettes for UI and charts, and how to test your design.8 min readIntermediateRead the full guide