The Scariest Thing This Halloween was Facebook’s Color Accessibility

I was looking at the rather cute Halloween themed Facebook reactions when I noticed the text of the label accompanying the reaction changed color with it. This is standard practice for Facebook, sure, but I wondered how the accessibility of the Halloween colors faired according to web accessibility guidelines (oh, and we’ll get back to the non-Halloween-y default colors in a bit 👻).

Example of a Facebook “Like” label taking on the signature Facebook blue color.

I’ve critiqued Facebook design before, and I’ll probably keep doing so, but only because when your platform has 1.8 billion daily active users, there are no acceptable edge cases; affecting even 1% of users just isn’t good enough at this scale (1% happens to be 18,000,000 people for Facebook, by the way). So, what does “good enough” mean when we’re looking at text color? For this post, I’ll be using the World Wide Web Consortium’s definition of accessible contrast:

“The visual presentation of text and images of text has a contrast ratio of at least 4.5:1”— WCAG 2.0 Guidelines

It’s also worth noting that I’m not considering these labels as “part of an inactive user interface component” as they aren’t there for control but rather for identifying what action you’ve taken if you can’t see/interpret/or recognize the emotion visually (e.g. this is text that should be accessible!)

So, what do we see for the Halloween colors? Let’s go left to right:

Color test for the Halloween “Haha” reaction

So this witchy “Haha” reaction is actually a really promising start! It passes solidly with a 4.62 contrast ratio, meaning it’s a-okay for display at both large and small sizes.

Color test for the Halloween “Wow” reaction

Being essentially a light gray on a pure white background, this label had by far the lowest contrast rating of any of the reactions, at 1.43. Actually, I think this is the lowest contrast ratio I’ve even seen in production! This one doesn’t even come close to the accessibility guidelines. Spooky indeed …

Color test for the Halloween “Sad” reaction

Coming in at 1.81 Frankenstein’s monster is probably really sad that the associated label still comes in under half the minimum contrast ratio.

Color test for the Halloween “Angry” reaction

Last but not least (accessible) in the Halloween reactions is the angry Jack-o-lantern. With a label contrast of 2.48, it’s better than the previous 2 but still doesn’t meet even the large text contrast display requirements. Yeah, I’d be angry too.

Bonus! The Default Colors Are Inaccessible Too

So, after writing this post initially I decided to test the default Facebook reaction labels. Despite there being 6 emotions, 3 of the labels share a yellow color, so there are only four colors here, how bad could it be?

From right to left, top to bottom: the “Like” label test, “Love” label test, “Haha” “Wow” & “Sad” label test, and the “Angry” label test.

Pretty bad. Of the four colors, two flat out fail at both large and small text sizes. The “Like” and “Love” labels only pass at the large text size, which these labels are presumably never displayed at, meaning none of the default labels pass the contrast ratio test for their intended display size.

While this seems like a trivial issue to those with good eyesight, for those who have contrast issues or visual impairments of any type, and especially for those who need help discerning emotional reactions, this inattention to accessibility is limiting at best, and can lead to confusion and frustration at worst.

(Shoutout to The Scenery for their color checking tool Hex Naw)