How to Use Dark Gray Text on a White Background: Tips for Adjusting Web Body Text Colors
After choosing a white background for a web page, how dark should the gray body text be? A gray close to black can give letters a strong presence, but making text lighter does not automatically make it more comfortable to read. Font weight, text size, and the relationship between paragraphs, headings, and supporting notes also matter. Using a fictional wooden shelving assembly guide, this article compares two dark grays while keeping the background completely white.
Keep the White Background Fixed and Assign Roles to Body Text, Headings, and Notes
With a white background fixed, you can compare text colors without also changing the surface behind them. Picture a shelving guide with three sections: “Align the Boards,” “Fasten the Screws Loosely,” and “Check That the Shelf Is Level.” Readers follow the detailed instructions as paragraphs, locate each step using its heading, and consult short notes about tools when needed. These different roles do not require a different bright color for every line.
Start with a dark gray for the main paragraphs. Make headings larger and bolder; they can be a little darker if that supports a clear hierarchy. Even when heading and paragraph colors are similar, font size, weight, and space above a heading can distinguish one step from another. Supporting notes can be somewhat softer in color, provided their words still contrast adequately with the page background.
In CSS, the styling language used to control a web page’s appearance, background-color sets the background and color specifies the text color. Consider them together rather than choosing only a text color and assuming it will be readable on every surface. Here, we deliberately keep the background white in both comparisons.
Compare Two Dark Gray Body Text Colors on the Same White Background
The colors are shown as HEX codes: a hash sign followed by six hexadecimal characters, using 0–9 and A–F. A contrast ratio measures the difference in relative luminance between text and its background. For both options, keep the page background white #FFFFFF and the headings in very dark gray #242424. The heading-to-background contrast ratio is approximately 15.52:1.
Option A: Try a Darker Gray for Instructions with Several Steps
In the first version of the shelving guide, set the main instructions in dark gray #353535. Against white #FFFFFF, its contrast ratio is approximately 12.27:1. Imagine several paragraphs explaining the orientation of the boards and the order in which to fasten the screws. Begin with this darker text treatment, then check whether the shapes of the letters remain clear at the intended size and weight.
Keep the headings in very dark gray #242424, which maintains approximately 15.52:1 contrast on the white background #FFFFFF. Because the headings and paragraphs are both dark, reinforce the section changes using heading weight, size, and space above each step. You do not need to introduce pale explanatory text merely to make the guide appear visually varied.
Option B: Lighten Only the Main Paragraphs Slightly
Next, show the exact same instructions with slightly softer dark gray #4C4C4C body text. Its contrast ratio against white #FFFFFF is approximately 8.59:1. Leave the heading style, paragraph width, font size, and line spacing unchanged when comparing the two versions. Check whether the lighter letters look too thin in the chosen typeface and whether the headings remain easy to locate. The difference is a design choice to test, not proof that one gray is universally easier to read.
For a small tool note, you might use medium-dark gray #5B5B5B, which has approximately 6.79:1 contrast against white #FFFFFF. However, an instruction such as “Fully tighten the screws only at the end” may be essential to completing the task. Keep important conditions in ordinary dark body text when necessary instead of automatically assigning all notes a weaker appearance.
Much paler gray #999999 provides only approximately 2.85:1 contrast against white #FFFFFF. That is below the 4.5:1 threshold for normal-sized text, so do not use it for assembly steps or meaningful explanatory notes.
Finish by Checking Font Weight, Links, and Mobile Display
Evaluate the gray colors with the typeface and text settings actually used on the page. As a starting point, you might test body copy around 16–18px and make headings slightly heavier than paragraphs. Here px means pixels, a unit used for text dimensions and spacing on the web. These are examples to adjust, not mandatory sizes. A thin font may look fainter in practice even when its underlying CSS text color has a high calculated contrast ratio.
For a real link such as “View the Parts List,” use a recognizable deep blue #235C78 with an underline, distinguishing it from noninteractive dark gray paragraphs. This blue has approximately 7.31:1 contrast against white #FFFFFF. Check the link’s keyboard-focus treatment too; do not depend on color alone to indicate that a phrase is clickable.
On a phone, the instructions wrap onto more lines. Review line spacing, paragraph gaps, and whether enlarging the text causes overlap or clipping. Compare Options A and B on the same white background, with equivalent device and font settings. A consistent body-text color usually makes the page easier to organize than switching grays from paragraph to paragraph; reserve differences for content roles that readers actually need to distinguish.
Under WCAG (Web Content Accessibility Guidelines) Level AA, normal-sized text generally requires at least a 4.5:1 contrast ratio against its background, while large text requires at least 3:1. All the proposed heading, body, note, and link colors in this article exceed the normal-text threshold against white. These figures were calculated for solid, opaque color pairs; if the text is placed over a photograph or translucent surface, check the actual resulting background separately. Choose a dark gray by comparing real passages with their font settings, not by assuming one particular shade is always the most comfortable.