A reading-first app with a quieter action system

WORKED EXAMPLE

A learning product should support long stretches of reading while still letting people find progress, controls and next steps.

Your next lessonOverview Details

DESIGNED FOR CLARITY

Read at your pace

A learning product should support long stretches of reading while still letting people find progress, controls and next steps.

Continue lessonFind out more →

PRIMARY CONTENTEasy to scan

Use the selected foreground color for important information.

SUPPORTING DETAILConsistent roles

Keep accent colors intentional across components.

Illustrative responsive UI, not a full app template. The buttons above demonstrate styling only.

Three pairings worth checking

Scores are calculated live with the same WCAG 2.x contrast utility as the site's Contrast Checker.

Body copy / page12.97:1AA normal text: passes

Secondary copy / card6.66:1AA normal text: passes

Primary action label / button6.90:1AA normal text: passes

Recheck the button colors yourself →

01 / THE DESIGN BRIEF

The task

Create a fictional study reader with lesson content, progress information and a primary “Continue lesson” action.

02 / COLOR DECISIONS

Why these roles?

A near-white background avoids glare from large blocks of pure white. Forest-teal controls give the app identity without competing with paragraphs; soft sage stays decorative.

03 / THE COMMON TRAP

What we changed

Pale green can work beautifully as a badge background but should not automatically become the text color for small instructions or buttons.

04 / BEFORE PUBLISHING

What still needs testing

Test the palette with long lessons, enlarged text, selection highlights, forms, dark-mode requirements and visible keyboard focus. The example covers only one color mode.

One measurable before-and-after improvement

Compare the same text use case before and after adjusting the foreground/background pair.

Example label

Before: Pale sage instructions2.52:1 AA normal: fails

Example label

After: Readable instructions6.36:1 AA normal: passes

These ratios describe opaque solid-color text pairs only. They do not assess font size, focus states, gradients, transparent overlays or full WCAG conformance.

IMPLEMENTATION STARTER

Take these values into your project.

CSS custom properties are named for interface roles, so you can change a brand accent without searching for every repeated HEX code.

/* A reading-first app with a quieter action system — illustrative starting values. */
:root {
  --color-background: #FAFAF5;
  --color-surface: #FFFFFF;
  --color-text: #27302C;
  --color-muted: #535F5A;
  --color-primary: #2C635B;
  --color-on-primary: #FFFFFF;
  --color-border: #BCC7C1;
  --color-accent: #A6C9A5;
}
/* Replace sample selectors with your own components. */
body { background: var(--color-background); color: var(--color-text); }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); }
.primary-action { background: var(--color-primary); color: var(--color-on-primary); }
.supporting-text { color: var(--color-muted); }