The most basic color decision in web design seems straightforward: black text on a white background. Maximum contrast. Maximum readability. Right?
Not exactly. Pure black (#000000) on pure white (#ffffff) creates a 21:1 contrast ratio, which exceeds accessibility requirements by a large margin. But for long-form reading, this maximum contrast can actually cause eye strain. The stark brightness difference creates a "halation" effect where bright white glows around dark letters, making extended reading uncomfortable.
The Comfortable Range
Most professional websites use a dark charcoal (#1a1a2e to #374151) rather than pure black, and a warm or cool off-white (#f8f9fb to #faf9f7) rather than pure white. This typically produces contrast ratios between 12:1 and 17:1, which far exceeds AA requirements while being noticeably more comfortable for long reading sessions.
Secondary Text
Not all text is created equal. Body content needs high contrast. But metadata (dates, categories, captions) can use a lighter "muted" tone. PaletteRx does not enforce this distinction in its roles, but your dark base provides the body text color while a mid-gray derived from it serves as your muted text color.
Colored Text
Using your primary or accent color for text (links, highlighted phrases) requires extra care. Colored text on a colored background creates compound contrast challenges. Always verify colored text pairs in PaletteRx's Step 3 before using them in production.
Dark Mode Typography
In dark mode, the same principle applies in reverse. Pure white text (#ffffff) on pure black (#000000) is harsh. Off-white (#e5e7eb to #d1d5db) on dark charcoal (#0f0f1a to #1e1e2e) is more comfortable. The contrast ratio drops slightly but remains well above AA requirements.