INTERACTIVE STUDY · COLOR

Color in context.

Change the surroundings. See what changes.

Choose four colors, then watch how they behave as a page, an interface, and a composition. A color's role depends on what sits beside it and how much space it occupies.

01 · PALETTE

Choose the colors.

Each color has a job. Edit a swatch or enter a hex value; the roles stay put while the colors change.

Surface main field Surface hex

Text page copy Text hex

Structure card & surround Structure hex

Accent small event Accent hex

02 · SURROUNDINGS

Move the palette.

The palette does not change when you switch views. Its surrounding field does.

03 · LOOK AGAIN

Squint view

Blur the study to compare large color masses.

60 / 30 / 10 areas

Compare one familiar proportion with equal fields.

LIVE STUDY

What changes?

Light surroundings

A VISUAL NOTE · 01

Notice what comes forward.

Color gains meaning through contrast, placement, and repetition. Read this line against the surface you chose.

Check the contrast

INTERFACE STUDY · 02

Same palette. Another role.

The card chooses black or white text for its current field.

COMPOSITION STUDY · 03

The two center squares are the same accent color.

Equal areas: surface · structure · accent

READABILITY · TEXT PAIRS

Check the pair.

These results evaluate text pairs used in the page and interface views. They do not certify the whole composition.

Chosen text on surface: —AA —AAA —
Accent link on surface: —AA —AAA —
Auto text on card: —AA —AAA —
Auto text on button: —AA —AAA —

For normal text, AA requires 4.5:1 and AAA requires 7:1. Large text has different thresholds. Color contrast is one part of accessibility; visual hierarchy and perception cannot be reduced to a pass/fail number.