Contrast

You might say

That gray helper text on the page strains my eyes—make it readable.

Contrast is the brightness difference between text and background—big enough to read; light gray on light gray is not.Light gray body text on a gray background almost vanishes when you squint—that is insufficient contrast. To turn "hard to read" into a checkable requirement, tell the AI "keep body text at 4.5:1 contrast against the background," the common industry threshold. Dark mode fails here most often: black backgrounds paired with the old gray look layered but sit below the line.

Know first

Dark Mode

One sentence, two contrast levels

Light background

Organize project background, process, and results into a shareable page.

Gray on light gray: vanishes when you squint

Body 4.5:1, secondary 3:1—speak in ratiosRe-check dark mode; don't reuse the light-mode text shade.

Two thresholds that suffice

Readable text 4.5:1: Headings, body, captions, button labels—everything meant for real reading needs at least 4.5:1 against its background.

Large text and icons 3:1: Big headlines, icons, and button borders that carry no paragraph-level reading duty start at 3:1—anything lower becomes invisible.

Quick checkChoose the best answer

After dark mode ships, someone says the body text strains their eyes. Which description most likely pinpoints the problem?

Check whether body text contrast reaches 4.5:1Bump the body font two sizes larger so words are easier to make outSwitch the text to a brighter brand color so it stands out more

You can say this to an AI Agent

Fix the low-contrast text on the page: readable text versus background at least 4.5:1, large headlines and icons at least 3:1, and re-check in dark mode. List which colors you changed.

Learn next

1Typography→2Accessibility→