What Color Should My Discord Roles/Reactions Be?

I subscribed to Discord Nitro a month ago, but only recently did I start thinking about the full range of powers the subscription granted me. I could create my own reactions, dump them in my personal server, and use them to react anywhere.

However, when I finally started trying to create some reactions, I hit an interesting snag: Discord can be used in dark and light mode,¹ and a reaction will have the same color on both modes. If I wanted my reaction to be as clearly readable in both modes as possible, what color should I make it?

(I could, of course, just outline my reaction with a contrasting color, but let’s say that’s cheating. With the limited space in a reaction, outlining isn’t that great of a solution anyway.)

Now, one can’t really just compute the “contrast of two colors” given only their RGB components; there’s no universally agreed-on definition of contrast in vision, and even if there were one, the contrast of two given colors would depend on the color space and possibly the viewer’s biology. But, to get a concrete answer to this question, we can use the standard sRGB model and the W3C’s definitions of contrast ratio and relative luminance.² As of time of writing on my computer,³ Discord reactions have background #2f3136 on dark mode and #f2f3f5 on light mode. Reactions you’ve reacted with have background #3b405a on dark mode and #e7e9fd on light mode. Because the dark mode background gets lighter and the light mode background gets darker, we’ll use the latter colors so we’re optimizing the worst-case contrast.

There are smarter approaches, but the 256³ = 16,777,216 possible 8-bit colors are perfectly feasible to brute force, so I wrote a short Python script to check all of them, which is at the bottom of this post. Under the parameters I’ve outlined, the optimal color for a Discord reaction is rgb(255, 65, 3) or #ff4103. A demo:

That was simple enough, but this color’s worst-case contrast ratio is less than 0.0000002 better than the runner-up. Surely even very mild aesthetic considerations will outweigh that. (It’s highly doubtful that the formulae I used were intended to have this degree of precision in the first place.)

After playing with a few ways to get a spread of options, I settled on categorizing colors into six buckets of saturation and twelve buckets of hue in the simple HSV model, and then finding the optimal color within each bucket. Here is a table of my results:

Note the lower contrast ratios in some of the highly saturated purple cells: red and blue don’t contribute enough to luminance to produce enough contrast from the dark background. Some of them are actually so low that pure black contrasts more with the dark background (and obviously far more with the light background).

Personally, I like the color #f64c38 right next to the color I identified as “optimal”. It’s still pretty saturated, but in an image the size of a Discord reaction, I find it tolerable.

Discord Roles

The exact same methodology can be adapted to find the optimal color of a Discord role. This is a question that has been investigated before, from a source that I found both unexpected and completely unsurprising: the Society for Internet Blaseball Research published a report titled Mutually Arising: Improving accessibility in Discord team role color contrast (PDF). Unlike them, though, I’m not constrained to following any existing colors or having to contrast different role colors, so I can just brute-force the entire color space again.

In dark mode, the main chat area’s background color is #36393f and is lighter than the sidebar color, but in light mode, the sidebar’s background color #f2f3f5 is darker than the main chat area’s background color. Colored usernames are displayed in the main chat and the sidebar, so we’ll use those two colors.

Here’s the optimal color, apparently:

Interactive

Type an arbitrary CSS color to visually see it against these different backgrounds.

There are a bajillion tools to automatically compute contrast ratios online. Two I like are WebAIM’s Contrast Checker and Lea Verou’s contrast-ratio.com.

Appendix: my Python script

Not the best code I’ve written, but not the worst either. Polished only enough that I’m okay publishing it. I tweaked the script after generating the above tables so it also considers colors that are darker than both or lighter than both target colors, which I think generalizes better in a sense.

from typing import List, Tuple, Optional
# https://www.w3.org/TR/WCAG20-TECHS/G17.html
def luminance_component(c0: int) -> float:
    c = c0 / 255
    # https://github.com/w3c/wcag/issues/360#issuecomment-498615230
    if c <= 0.04045: # or 0.03928, this literally doesn't matter for 8-bit colors
        return c / 12.92
    else:
        return ((c + 0.055) / 1.055) ** 2.4

def luminance(r: int, g: int, b: int) -> float:
    R, G, B = map(luminance_component, (r, g, b))
    return 0.2126 * R + 0.7152 * G + 0.0722 * B

Color = Tuple[int, int, int]

def contrast_ratio(rgb1: Color, rgb2: Color) -> float:
    lum1 = luminance(*rgb1)
    lum2 = luminance(*rgb2)
    return (max(lum1, lum2) + 0.05) / (min(lum1, lum2) + 0.05)

def worst_case_ratio(c1: Color, c2: Color, cb: Color) -> float:
    "The worse ratio between c1:cb and c2:cb."
    return min(contrast_ratio(c1, cb), contrast_ratio(c2, cb))

def report(light: Color, dark: Color) -> None:
    print(light, dark, contrast_ratio(light, dark))

def hue(r: int, g: int, b: int) -> float:
    mx = max(r, g, b)
    c = max(r, g, b) - min(r, g, b)
    if c == 0: return 0 # whatever
    if mx == r: return ((g - b) / c) % 6
    elif mx == g: return ((b - r) / c) + 2
    else: return ((r - g) / c) + 4

def saturation(r: int, g: int, b: int) -> float:
    mx = max(r, g, b)
    if mx == 0: return 0
    return 1 - min(r, g, b) / mx

def solve(color1: Color, color2: Color) -> None:
    saturation_buckets = 6
    hue_buckets = 12
    # Table of (score, color)
    buckets: List[List[Optional[Tuple[float, Color]]]] = [[None] * saturation_buckets for _ in range(hue_buckets)]

    best_score = 0.0
    for r in range(0, 256):
        for g in range(0, 256):
            for b in range(0, 256):
                color = (r, g, b)
                score = worst_case_ratio(color1, color2, color)
                hi = int(hue(r, g, b) / 6 * hue_buckets)
                si = min(saturation_buckets - 1, int(saturation(r, g, b) * saturation_buckets))
                cb = buckets[hi][si]
                if cb is None or score > cb[0]:
                    buckets[hi][si] = (score, color)
                    best_score = max(best_score, score)

    print("Best colors for contrast between", color1, "and", color2)
    print("<table>")
    for cs in buckets:
        print("<tr>")
        for c in cs:
            if c is None:
                print("<td>n/a</td>")
                continue

            score, color = c
            r, g, b = color
            txt = "#{:02x}{:02x}{:02x}<br><small>{:.9}</small>".format(r, g, b, score)
            if score == best_score:
                txt = "<strong>{}</strong>".format(txt)
            print('<td style="background-color: rgb{}">{}</td>'.format(color, txt))
        print("</tr>")
    print("</table>")

discord_dark_bg = (0x36, 0x39, 0x3f)
discord_dark_sidebar_bg = (0x2f, 0x31, 0x36)
discord_dark_react_bg = (0x2f, 0x31, 0x36)
discord_dark_reacted_bg = (0x3b, 0x40, 0x5a)
discord_light_bg = (0xfa, 0xfa, 0xfa)
discord_light_sidebar_bg = (0xf2, 0xf3, 0xf5)
discord_light_react_bg = (0xf2, 0xf3, 0xf5)
discord_light_reacted_bg = (0xe7, 0xe9, 0xfd)

solve(discord_dark_reacted_bg, discord_light_reacted_bg)
solve(discord_dark_bg, discord_light_sidebar_bg)