How Color Works
Part 2
How Color Works
Part 2
How Color Works
Part 2
Accessibilty and color contrast
Accessibilty and color contrast
Accessibilty and color contrast
Designing with empathy = designing with accessibility
Designing with empathy = designing with accessibility
Color alone is not enough
Color alone is not enough
To design for everyone, especially users with visual impairments, we need contrast, clarity, and alternatives.
To design for everyone, especially users with visual impairments, we need contrast, clarity, and alternatives.
Use of bold, saturated colors (green, red, blue)
Use of bold, saturated colors (green, red, blue)
Text and icons are always clear for readability, easily passing WCAG contrast standards.
Text and icons are always clear for readability, easily passing WCAG contrast standards.



Typography is large and legible, with no ambiguity about what’s tappable.
Typography is large and legible, with no ambiguity about what’s tappable.
Progress is shown through both a bar and a series of checkmarks — again, not just color.
Progress is shown through both a bar and a series of checkmarks — again, not just color.
Each action is clearly defined — buttons have ample padding, distinct shapes, and strong hierarchy.
Each action is clearly defined — buttons have ample padding, distinct shapes, and strong hierarchy.



Don’t Rely on Color Alone
Don’t Rely on Color Alone
Color can’t be your only signal.
Add icons, underlines, or labels to convey meaning — especially for users with color blindness.
Color can’t be your only signal.
Add icons, underlines, or labels to convey meaning — especially for users with color blindness.






Simulate Color Blindness
Simulate Color Blindness
Reds and greens often appear identical to colorblind users.
Test your UI using color blindness simulators to catch critical visibility issues.
Reds and greens often appear identical to colorblind users.
Test your UI using color blindness simulators to catch critical visibility issues.



Accessible Components
Accessible Components
Use bold shapes, clear icons, and high-contrast components.
Think beyond color — accessibility includes layout and behavior too.
Use bold shapes, clear icons, and high-contrast components.
Think beyond color — accessibility includes layout and behavior too.












Up your color game in Figma
Up your color game in Figma
Up your color game in Figma
Improve accessibility, consistency and creativity in your palettes
Improve accessibility, consistency and creativity in your palettes
Contrast by Figma
Contrast by Figma
Check color contrast ratios instantly on any element.
Perfect for meeting accessibility standards (WCAG).
✔️ Shows pass/fail indicators
✔️ Works live as you design
Check color contrast ratios instantly on any element.
Perfect for meeting accessibility standards (WCAG).
✔️ Shows pass/fail indicators
✔️ Works live as you design
Contrast



Contrast



Color Blind
Color Blind
Simulate how your designs appear to users with color blindness.
✔️ Covers deuteranopia, protanopia, tritanopia
✔️ Helps avoid relying on color alone
Simulate how your designs appear to users with color blindness.
✔️ Covers deuteranopia, protanopia, tritanopia
✔️ Helps avoid relying on color alone




Original
Original


Deuteranopia vision
Deuteranopia vision


Protanomaly vision
Protanomaly vision


palette generation
palette generation
Create or extract color palettes directly in Figma.
✔️ Grab colors from images
✔️ Generate harmonious themes
Create or extract color palettes directly in Figma.
✔️ Grab colors from images
✔️ Generate harmonious themes
Image Palette Image Palette Extractors
Image Palette Image Palette Extractors






Color Palette for automatic palette generation.
Color Palette for automatic palette generation.












Bonus: Use Coolors.co for Stunning Color Palettes
Bonus: Use Coolors.co for Stunning Color Palettes
Auto-generate harmonious schemes
Lock favorite colors & shuffle others
Export directly to Figma or CSS
Auto-generate harmonious schemes
Lock favorite colors & shuffle others
Export directly to Figma or CSS






Start designing your project
Feel free to reach out to discuss your ideas.
Start designing your project
Feel free to reach out to discuss your ideas.
Start designing your project
Feel free to reach out to discuss your ideas.