Using tints and shades to solve color contrast problems

Suggesting color contrast fixes on a website often meets resistance from designers and stakeholders. This resistance typically stems from web design teams working with brand style guides that define specific colors for use across the website. Straying from these established colors can create inconsistencies that detract from a cohesive, professional brand appearance.

What can you do when none of the brand colors work as alternatives? One solution is to use tints and shades. A tint is created by adding white to a base color, while a shade is created by adding black. Using these variations can help you meet minimum contrast ratios (SC 1.4.3) between background and text colors while maintaining the original color hue.

There is a great Tint & Shade Generator tool, created by Michael Edelstone, which offers various tint and shade options from a base hex color. Including these variants in a brand style guide can simplify the process of resolving color contrast issues. Web designers can also include examples of acceptable color combinations to prevent misuse.

This illustrates why accessibility should be part of the conversation during the design phase. Addressing color contrast issues before implementation saves time and prevents teams from being locked into constraints that don’t provide optimal support.