Color Palette & Accessibility Basics

A good color system does two jobs at once: it reinforces a brand and it stays readable for everyone. This reference covers the basics we lean on when building Niagara UI templates.

Primary and neutral colors: define one or two primary brand colors plus a scale of neutral grays for text, borders, and backgrounds. Neutrals do most of the heavy lifting in a real interface.

Contrast ratios: body text should meet at least a 4.5:1 contrast ratio against its background, and large headline text can drop to 3:1. Check ratios whenever you pair a new text and background color.

Don't rely on color alone: pair color-coded states like errors or success messages with an icon or text label so the information still comes through for colorblind users.

Dark and light variants: build each core color as a small scale so you have accessible options for hover, active, and disabled states without inventing new hues on the fly.

Test in grayscale: converting a design to grayscale is a quick way to check whether hierarchy still reads clearly without color as a crutch.