School’s Out design system
Step 5 of 6

Make readable

Tune every card so its text is easy to read.

Readability on every card

Each card’s text is checked against its colors and texture. 4.5 is the minimum; set the goal below and watch the cards adjust.

Goal
Suggested for you7.4:1
Connect7.4:1
What they offer7.3:1
Suggested for you
7.4:1
Connect
7.4:1
What they offer
7.3:1
Minimum, 4.5 Goal, 8.2
Show logic

Every branded card is set to one WCAG luminance per appearance, so readability matches on every card of every business. Since October 19 (the vivid finish, Hannah) each card keeps the brand’s own hue and takes its graded share of the chroma sRGB shows there: vivid brands stay vivid and muddy ones true, so an olive stays olive. The luminance is solved from the 8.2:1 text goal and the ink the card actually gets, and every grain speckle and blend keeps 4.5:1.

finishBrand(settings, brand, placeholder, intake, tintColor, name): BrandFinish

Card brightness (finishLuminance)0.435
Color strength (chroma)0.250
Darkest speckle (speckleFloor)6.6:1
Suggested for you colorblue, with pink
Connect colorblue, with orange
What they offer colorblue, with yellow
Header glassblur blur(32px); the veil (58%) is still solved but no longer painted
Initials tile#69b6ff
Logo tile background#fffdf5
Minimum for text4.5:1
Button labels4.5:1
Placeholder cards6.4:1

Try it: which text color reads on a card?

Suggested for you
Text color chosen (inkChoice)#182538
Readability11.3:1
Black on this color15.4:1
White on this color1.4:1

Relationship functions

FunctionFrom → toHome
paletteColorfamily → the color cards render it asfinish.ts
textTintColorprimary → text tintfinish.ts
finishLuminancecontrast goal + ink → card luminancefinish.ts
cardAssignmentsbrand → each card’s color, companion, and shadefinish.ts
inkChoicesurfaces → text colorfinish.ts
actionPillink + surfaces → button base and floorfinish.ts
placeholderTonesweep index → grayed tone at 6.4:1finish.ts
markTilebrand → initials tile colorsfinish.ts
logoTileGrounddeclared + sampled background + brand → logo tilefinish.ts
accentColorsbrand → accent colors and inksfinish.ts
lightTextink → whether the card’s glass dimsfinish.ts