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.

malaksherif1997@gmail.com

Start designing your project

Feel free to reach out to discuss your ideas.

malaksherif1997@gmail.com

Start designing your project

Feel free to reach out to discuss your ideas.

malaksherif1997@gmail.com