Tools for accessible color and contrast
Overview
Summary: This page contains links to tools for creating accessible colors and palettes, including considerations like contrast, etc. Please make sure to see UTMB's Brand Identity and the Color Style Guide for additional information.
Notes:
- Color contrast is important for print as well as digital content.
- FDA Guidelines on Legibility of Labelling
- Also check out Atkinson Hyperlegible Next a typeface for low vision (also discusses considerations for accessible font selection.
- Article: The Realities And Myths Of Contrast And Color (Smashing Magazine)
- Article: Orange You Accessible? A Mini Case Study on Color Ratio (Bounteous)
Desktop color tool
Colour Contrast Analyser (CCA)
Vispero’s free color contrast checker.
Web tools with training
Leonardo
- Accessible color for design systems just got easier (Medium article)
- Creating accessible themes in Leonardo (YouTube 19min) Very cool, also helps with dark mode
- Creating a colorblind safe palette (YouTube 8min)
Tools and design information
List of tools and design resources
- Accessible color generator (find the closest accessible color)
- Accessible Palette
- Adobe Spectrum design system color fundamentals
- A11y color tools
- Ambient Color Generation Tool
- Apple Design on color
- Black or White
- Build a Color Contrast Grid - Recommended
- Carbon design system
- Colour contrast inspiration
- Contrast by Christopher Geary
- Contrast Grid
- The Contrast Triangle
- Contrast Wizard
- Hex Naw
- Interactive Guide to Color and Contrast
- Tailwind CSS Color Generator - shows sample designs, as well.
- Text on Control
Related resources
Other helpful resources from the Digital Accessibility Hub.