04 — Colour
Mostly green. A little loud.
Seven colours. Pine and Paper do most of the work, Night carries the text, and Clay, Sun and Moss are used sparingly. Click any value to copy it.
Primary
Three colours do 90% of the work.
Secondary
Accents, used on purpose.
Proportions
Roughly this much of each.
Pine 40%
Paper 35%
Accessibility
Which pairs can carry text?
TEXT ↓ / BG →
Pine
Clay
Sun
Moss
Mist
Paper
Night
Pine
—
Aa2.64FAIL
Aa5.73AA
Aa3.45LARGE
Aa8.18AA
Aa8.75AA
Aa1.93FAIL
Clay
Aa2.64FAIL
—
Aa2.17FAIL
Aa1.30FAIL
Aa3.10LARGE
Aa3.31LARGE
Aa5.10AA
Sun
Aa5.73AA
Aa2.17FAIL
—
Aa1.66FAIL
Aa1.42FAIL
Aa1.52FAIL
Aa11.08AA
Moss
Aa3.45LARGE
Aa1.30FAIL
Aa1.66FAIL
—
Aa2.37FAIL
Aa2.53FAIL
Aa6.67AA
Mist
Aa8.18AA
Aa3.10LARGE
Aa1.42FAIL
Aa2.37FAIL
—
Aa1.06FAIL
Aa15.81AA
Paper
Aa8.75AA
Aa3.31LARGE
Aa1.52FAIL
Aa2.53FAIL
Aa1.06FAIL
—
Aa16.91AA
Night
Aa1.93FAIL
Aa5.10AA
Aa11.08AA
Aa6.67AA
Aa15.81AA
Aa16.91AA
—
WCAG 2.2 contrast. AA needs 4.5:1 for body text; LARGE means it only passes for text 24px and up (or 19px bold).
05 — Next