Reddit’s Community Appearance color settings can be confusing — the three colors you set as your key, base, and pinned post colors get passed through a series of back-end functions to create various shades for use on buttons, text, links, and backgrounds. While it’s definitely easier than individually setting each color yourself, it might leave you wondering whether those newly-computed colors are as user-friendly as your known brand colors!
We’ve replicated Reddit’s color math below to create a free tool that integrates with WebAIM’s Contrast Checker API to validate the results against WCAG level AA and level AAA accessibility requirements. Test out your subreddit’s colors (or any colors you like!) and see how they score.
What We Found
In general, the color combinations generated by Reddit from any given colors seem to be largely compliant with WCAG level AA, regardless of the starting colors. Their color math code converts the user-input color into the HSL (hue, saturation, luminance) format and then swaps out the luminance value with predefined shades of gray. The hue and saturation in the variable remain the same as the original color, but the luminance changes generate a series of tones of the original color that can be used as foreground or background colors with consistent contrast ratios.
