Contrast Ratio
The mathematical ratio between two colors' relative luminance — the standard used by WCAG to determine text readability.
What it means
Contrast ratio is calculated by dividing the lighter color's relative luminance by the darker color's, then adjusting: (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (pure white on pure black).
WCAG defines minimum contrast thresholds: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), and 4.5:1 for large text (AAA). These aren't arbitrary — they represent the minimum differentiation that most people with typical or mildly reduced vision can reliably distinguish.
Why it matters in palette design
Contrast ratio is the most concrete, testable accessibility metric in palette design. PerfectPalette evaluates all N×(N-1) color pair combinations in your palette and reports which meet AA, AAA, or neither. A palette where fewer than 4 pairs pass 4.5:1 is flagged as not export-ready.
Common confusion
Contrast ratio vs. perceived contrast: The WCAG formula uses luminance, not visual perception of color difference. Two colors can have a passing ratio but still feel hard to read (e.g., saturated red on saturated green) because the formula doesn't account for hue-based legibility. It's a necessary but not always sufficient measure.
Example
Dark gray text (#374151) on a white background (#FFFFFF) yields a contrast ratio of 10.7:1 — well above AAA. The same gray on a light blue background (#DBEAFE) yields 5.3:1 — still AA-compliant for normal text. On a medium blue (#93C5FD), it drops to 2.9:1 — failing even AA.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.