Role Preview for Discord

Preview role colors and check for possible issues with contrast and color schemes!
📋 Copy the website address to share your changes!

Note: It's normal to only reach "Passable contrast" when optimizing for both dark and light theme.

Roles

Tools

Simulate color blindness

Preview

Example 1

🙂 Good contrast (4.91:1)

Example 2

😐 Passable contrast (3.84:1)

Example 1

😨 Lacking contrast (2.36:1)

Example 2

😐 Passable contrast (3.02:1)

This tool is created and maintained by Dragory

The source code is available on GitHub

Contrast ratio calculations are based on the WCAG 2.0 standard. For an explanation of WCAG 2.0 contrast requirements, see this link. "Good" and "Great" contrast ratios pass level AA contrast requirements. "Passable" passes the minimum contrast level recommended by ISO-9241-3 and ANSI-HFES-100-1988 for standard text and vision. "Lacking" is below contrast recommendations, but still somewhat readable. "Insufficient" can be hard to read even for those with better than average vision.

Source for the prevalence numbers for the different types of color blindness:
https://www.ncbi.nlm.nih.gov/books/NBK11538/table/ch28kallcolor.T1/

Twemoji are used under the CC BY 4.0 license. The website icon is a resized version of the 🛠 icon.