Black text on a white background works.
Very well, in fact.
But that does not mean every paragraph, heading, label and button on your website needs to be dressed in #000000.
Black is a color. Not a requirement.
Start with the background
There is no single best text color on its own.
The color behind the text matters just as much.
A dark gray can be perfectly readable on white. A deep blue can work too. Put that same blue on a darker surface and the result may become difficult to read.
That is because contrast describes a relationship between two colors: the foreground and the background.
Change either one, and you change the relationship.
Contrast is a relationship.
What does a contrast ratio actually mean?
A contrast ratio is a number that describes how different the lightness of two colors is.
It runs from 1:1 to 21:1.
At 1:1, there is effectively no light–dark contrast between the two colors.
At the other extreme, black #000000 on white #FFFFFF has a contrast ratio of 21:1.
Most useful text combinations sit somewhere in between.
A higher number means there is more light–dark separation between the text and its background. It does not automatically mean the design is better, but it gives the text more contrast to work with.
And importantly, contrast is not simply about how different two colors look.
A bright red and bright green may look like completely different hues while still being relatively close in lightness. A dark blue on white can have much stronger contrast.
Where does WCAG come in?
WCAG stands for Web Content Accessibility Guidelines.
These guidelines are published by the W3C and provide accessibility requirements for websites and other digital content. Among many other things, they define minimum contrast levels for text.
For WCAG 2.2 Level AA:
- normal text needs at least 4.5:1
- large-scale text needs at least 3:1
WCAG considers text large-scale from roughly 24 CSS pixels when regular, or about 18.5 CSS pixels when bold.
There is also the stricter AAA level. That asks for 7:1 for normal text and 4.5:1 for large text.
You do not need to memorize all of those numbers.
The useful starting point is simpler:
For ordinary body text, aim for at least 4.5:1.
And remember that this is a minimum accessibility threshold, not a target that every text color should sit just above.
A body color with 8:1 or 10:1 has considerably more room than one sitting at 4.6:1.
Notice what WCAG does not say:
“Please use black.”
Near-black gives you plenty of room
Black on white reaches the maximum contrast ratio of 21:1.
But you can move quite a long way away from pure black and still have strong contrast.
For example:
- #171A1D (Charcoal) on white: about 17.5:1
- #333333 (Slate) on white: about 12.6:1
- #3E4853 (Indigo) on white: about 9.3:1
- #65717D (Blue stone) on white: about 5.0:1
All four are dark enough to meet the WCAG AA minimum for normal text on white.
Move further toward a light gray such as #9AA3AD, however, and the contrast drops to around 2.6:1. That is too low for normal text.
This is why “not black” does not mean “make the text pale.”
There is a large useful range between those two extremes.
Is black on white actually pleasant to read?
It can be.
Black text on white gives you the strongest possible light–dark contrast, and research on screen reading generally finds that dark text on a light background performs very well.
So there is no need to avoid #000000 (black) because it is somehow inherently uncomfortable.
At the same time, maximum contrast is not automatically the most comfortable choice for every person, screen or environment.
Some readers prefer a slightly softer combination. A very dark gray on white, or dark text on a light gray surface, can still provide excellent contrast while feeling visually less stark.
The important distinction is between legibility and comfort.
Contrast helps determine whether text can be distinguished clearly from its background. Reading comfort also depends on things such as:
- screen brightness
- ambient light
- font size and weight
- line length and spacing
- how long someone is reading
- individual vision and preferences
That is one reason there is no universal “perfect” text color.
For body text, a near-black such as #171A1D or #3E4853 can give you very strong contrast without requiring pure black. But that is a design choice, not a readability rule.
And reducing contrast simply because something feels “softer” is not always an improvement. Once text becomes too light, some readers have to work harder to see it.
Comfort is personal. Readability still needs enough contrast.
Passing the minimum is not the whole story
A contrast checker gives you an important answer:
Does this particular color pair have enough contrast?
It does not tell you everything about how comfortable the text will be to read.
Font size matters. Weight matters. Typeface matters. Line length and spacing matter. A tiny thin label and a large bold heading can use exactly the same colors and still create very different reading experiences.
That is also why a contrast ratio of 4.5:1 should not be treated as a magical guarantee that every piece of text will suddenly be easy to read.
It is a useful minimum.
Good typography still has work to do.
Not every piece of text needs the same color
A useful interface may have separate colors for:
Heading Text. Body Text. Secondary Text. Muted Text. Text on Color.
Those are different jobs.
Body text has to remain comfortable through paragraphs and longer reading.
Headings can carry more visual personality while still needing sufficient contrast.
Secondary text can step back from the main content without disappearing.
Muted text may be quieter, but if people need to read it, it still needs enough contrast.
And text on color has its own relationship to consider.
White text on a blue button, for example, is tested against the blue button – not against the white page surrounding it.
Every role creates its own foreground/background pair.
Colored text is allowed
Text does not have to be gray either.
A heading can be navy.
A link can be purple.
An interface can use a dark green for important text.
What matters is not whether a color looks colorful.
What matters is whether it remains sufficiently distinct from the surface behind it.
That is an important distinction because hue and contrast are not the same thing.
You can have two very different-looking hues with weak contrast.
And you can have a colorful text color with excellent contrast.
Give text colors some room
There is another practical reason not to design every text color right on the 4.5:1 boundary.
Backgrounds change.
A secondary text color that just passes on pure white may have less contrast on a light gray card. A button may change color on hover. A dark-mode version may introduce completely different relationships.
A little extra contrast gives your system more room to move.
You do not need to chase 21:1 everywhere.
But you do not have to treat 4.5:1 as a finish line either.
Choose the color for the job
The best text color depends on more than whether it is black.
Ask:
- What is the background?
- How important is this text?
- How large and heavy is it?
- Is it body copy, a heading, a link or supporting information?
- Does the color have enough contrast in the state where it is actually used?
Then test the actual pair.
The best text color is not the darkest one. It is the one that does its job.
Have a text color and background in mind? Check the pair with the Qolorio Color Contrast Checker to see the contrast ratio and how it compares with common WCAG text requirements.
Some content and tools were created with AI assistance and human review. Visuals may be AI-generated, manually designed, or a combination of both. Despite careful review, errors may occur.