Auditing Colour

Tiffinbox's code contains 37 greys and 9 oranges. Many of them differ by a single digit, like #E8590C and #E85A0C, which no human eye can tell apart. Some of the greys are too pale to read. Colour is usually the messiest part of an audit, and the part where a clean-up shows most.

The rule

Collect every colour, merge near-twins, give each survivor a job, check contrast.

• Collect. Pull every colour value from the code and the design files, with how often and where each is used.
• Merge near-twins. Colours that look the same become one. Nine oranges might shrink to three genuinely different shades.
• Build scales. Arrange the survivors into steps from light to dark: orange-100 to orange-900, gray-50 to gray-900.
• Give each a job. Map colours to semantic roles: brand, text, background, border, primary action. Add functional colours that carry meaning: green for success, amber for warning, red for error, blue for information.
• Check contrast. Text must stand out from its background. The WCAG accessibility guidelines, at the widely used AA level, ask for a contrast ratio of at least 4.5 to 1 for normal text, and 3 to 1 for large text (about 24 px, or about 19 px when bold) and for the edges of controls and meaningful icons.

Contrast checks often bring surprises. White text on Tiffinbox's brand orange #E8590C measures about 3.6 to 1. That passes for large text but fails for normal-sized text. A darker orange-700, #B4460A, measures about 5.5 to 1 with white and passes.

One more rule: never let colour carry meaning alone. Some people cannot tell red from green, so an error needs an icon or words as well as red.

The shortcut

Three words: twins, jobs, contrast. Merge the twins, give every survivor a job, and test every text-and-background pair you intend to use.

Drills

Answer fast — trust the rule.

Remember

• Collect every colour, merge near-twins, give each survivor a job, check contrast.
• Shortcut: twins, jobs, contrast. Normal text needs 4.5 to 1; large text and control edges need 3 to 1.
• Trap: colour carrying meaning alone, or trusting the brand colour to pass contrast without measuring it.