Dyizan Academy — A design-skills academy: a staged | dyizanacademy.com

Dyizan Academy — A design-skills academy: a staged | dyizanacademy.com

Color Contrast and Color-Blind-Safe Palettes

Body text needs a 4.5:1 contrast ratio under WCAG AA — and the palette needs a deuteranopia test before it ships.

WCAG AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text, where large means 24 px or larger, or 18.66 px bold. AAA raises the bar for normal text to 7:1. These are measured values, not impressions — a pair that 'looks fine' can still fail.

Large text gets the lower threshold because bigger letterforms stay legible at less contrast. That is one more reason the type scale matters: on the 1.25 scale from 16 px, the 25 px step and the 31 px bold step are the first sizes that qualify as large.

The signature mark of this site, drawn as a plate

On narrow screens, swipe or scroll the plate sideways.

Contrast is only half the check. Red-green color vision deficiency affects roughly 8% of men and 0.5% of women, so status colors and chart series must be run through a deuteranopia simulator — reading hex values tells you nothing about how the hues separate for those viewers.

The working habit is to treat color as pairs, not swatches: every text color is documented against the background it sits on, measured, and then simulated. A palette is finished when every pair has a number next to it.

This is stage 4 of the learning path. If the layout underneath also needs auditing, the five-step pass on the Type, Grid and Spacing page covers everything except color.

  • List every text/background pair in the design.
  • Measure each pair's contrast ratio.
  • Fail anything under 4.5:1 for body text or 3:1 for large text.
  • Run the full palette through a deuteranopia simulator.
  • Re-check status colors and chart series specifically — they fail most often.

Further reading