Skin Tone Emoji Redesign

2024
AccessibilityArt Direction

I art directed our emoji skin tone redesign to improve visual accessibility for light tones on light surfaces and dark tones on dark surfaces. This work was foundational to the emoji team's understanding of legibility.

Outlines add a lot of critical detail to emoji.

I can't see the thumbs up!

On a light theme the lightest skin tone thumbs up was nearly invisible, and on a dark theme the darkest tone was too; users just could not see it.

Every tone, both themes

We kept the palette and added accessibility hinting to every tone in the emoji set: all five modifier tones and the default yellow. The hinting keeps light tones visible on light surfaces and dark tones visible on dark surfaces.

The redesigned tones shown on light and dark surfaces

Emojipedia's changelog for Noto Color Emoji 16.0, dated 10 September 2024, recorded it in one line:

"Tweaked the shading and outlines for most gesture emoji designs."

The design guidance

I art directed the redesign and wrote the design guidance: how each tone is constructed, where outlines and shading provide the contrast, what passes and what fails. That guidance now appears in internal Google-wide docs, so any team drawing, shipping or auditing emoji starts from rules that already pass.

The emoji picker showing the hand emoji with tone options

What followed

Gboard's global skin tone setting made the tones easier to use, and the emoji specification, which defines emoji behavior across Google products, now includes the guidance. Jennifer Daniel, writing on The Keyword, described the problem:

"Emoji with the darkest skin tones can be difficult to see in dark mode."
Ricky Yurewitch

Skin Tone Emoji Redesign