Choose Text Colors by Role and Background
Test body copy, secondary text, links and disabled labels with concrete inputs rather than picking gray by appearance.
Updated : Rechecked technical claims, replaced unsupported generalizations, and added reproducible examples and source links.
A text palette is a set of foreground/background decisions. Start with the body copy on the main reading surface, then test secondary text, links and messages where they actually appear. Type size, weight and content still need visual review after the numerical check.
Make hierarchy without hiding information
For a white reading surface, compare #111827 body copy with #6B7280 secondary text. Use spacing, headings and weight to create hierarchy as well. A timestamp or field hint remains information even when it is visually secondary; do not lower its contrast simply because it is small.
A reproducible text and background example.
Same pair, larger text.
##6B7280 / ##FFFFFF
Secondary text candidate on white.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##9CA3AF / ##FFFFFF
A lighter candidate to check before using it for small text.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixUse the correct text-size category
The large-text exception begins at 18pt regular or 14pt bold, approximately 24px or 18.67px in CSS. A default 18px bold label is still below that threshold. Treat the checker result as one input when inspecting thin glyphs and the chosen font.
Give links a visible cue
.article { color: #111827; background: #FFFFFF; }
.article a { color: #1D4ED8; text-decoration: underline; }
.article .metadata { color: #6B7280; }An underline gives an inline link a cue beyond hue. Keep it visible outside hover and test the link against the actual surface. If you remove underlines, you need another valid way to distinguish links; changing the cursor alone does not help someone who has not found the link.
Review exceptions carefully
Inactive controls have contrast exceptions, but a low-contrast label is not automatically inactive. Loading information, helper text and placeholder instructions may still be needed. Pure black on white is allowed; use softer tones only when they meet your reading and contrast needs.
Inspect this link color and use its result link in your typography specification. Repeat on tinted callouts and dark surfaces.