Contrast is about lightness, not just color
When people say a color combination is hard to read, the problem is usually that the two colors are too close in lightness. Red text on a green background can look vivid and still be tiring, because the two colors may be similar in how light or dark they are. Black and white are far apart in lightness, which is why that pairing is so reliable.
A quick way to check your own work is to look at it in grayscale. Take a screenshot and convert it to black and white, or squint until the details blur. If the text almost melts into the background, the pairing relies on hue alone and will be fragile.
Contrast ratios in plain terms
Accessibility guidelines describe contrast with a number called a contrast ratio, which compares the relative brightness of two colors. The scale runs from 1:1, meaning no difference, to 21:1, which is black on white. Widely used web accessibility guidance sets minimum targets:
| Kind of text | Commonly cited minimum ratio |
|---|---|
| Normal body text | 4.5:1 |
| Large text (roughly 18 points, or 14 points bold, and up) | 3:1 |
| Essential interface parts such as icons and input borders | 3:1 |
Free checkers will calculate a ratio when you enter two colors. Treat the numbers as a floor rather than a goal. Passing the minimum does not guarantee comfortable reading, especially for long passages, and the exact requirements depend on which version of the guidelines applies to you, so check the current official wording if you need to meet a specific standard.
Why readability changes with conditions
Your design is rarely viewed in the conditions in which you made it. Consider what changes:
- Bright light. Sunlight on a phone washes out screens. Pale text that looks fine indoors can vanish outdoors.
- Low screen brightness. Many people run their screens dim to save battery or at night, which reduces the effective contrast.
- Different displays. Colors look different on cheap monitors, old projectors and printed handouts.
- Age and vision. Contrast sensitivity commonly decreases with age, and many people have lower vision or other conditions that make faint text difficult.
- Fatigue. Even readers with excellent vision find low-contrast text tiring over time.
A good rule is to design for the worst reasonable situation, not the best. If the text still reads when the screen is dim and you are standing in daylight, it will usually be comfortable almost everywhere.
Pairings that often cause trouble
Some combinations show up again and again in weak designs.
- Light gray text on white. It looks elegant in a mockup and is often hard to read in practice.
- Colored text on a similarly bright color. Yellow on white, light blue on cream or orange on red are typical examples.
- Text over photographs. The background changes from place to place, so the contrast is inconsistent along a single line.
- Thin letters on a medium background. Thin strokes need more contrast than bold ones.
- Hint text and disabled text. Form hints are often so pale that they become unreadable.
Fixes that usually work
- Darken the text or lighten the background. The simplest fix is often to move one color a step further from the other.
- Add a solid or semi-transparent panel behind text on photos. A dark overlay across part of the image gives the letters a stable base.
- Increase size or weight. Larger and bolder text tolerates a slightly lower ratio, though it is better to improve contrast as well.
- Avoid pure black on pure white for long reading if it bothers your audience. Some people find the extreme difference harsh. A very dark gray on an off-white background still has strong contrast and may feel softer. Preferences vary, so test with real readers when you can.
Do not rely on color alone
Contrast is only one aspect of color accessibility. A chart that distinguishes lines only by red and green will fail for people with color blindness, and a form that marks errors only with a red border will fail for others. Add a second signal: a label, a pattern, an icon or a change in line style. The article on color vision differences goes deeper into how to check for this, and it is part of the wider work of making content accessible.
The same care applies to video captions, which need a readable color against changing footage, and to the wider goal of content accessibility. Dark mode deserves a mention too. Reversing a light design by simply swapping colors can create problems, such as glaring white text on black that causes halos for some readers. Check both versions separately, and avoid saturated colors on dark backgrounds, which can vibrate.
Testing without special skills
Run your main pair through a contrast checker, view the design on a phone at low brightness, and zoom to 200 percent to see whether anything breaks. If you want a structured process, the article on accessibility testing describes ways to gather feedback from people who read differently from you.
Keep a small tested palette
The easiest way to maintain good contrast is to test your combinations once and reuse them. Pick a handful of text and background pairs that pass, write them down and use only those. That habit supports the repetition principle described in the overview of design principles, and it protects you from last-minute choices made under deadline.
Clear wording in plain language reduces effort in the same way strong contrast does. Readability is never a single number. Treat the guidelines as a helpful baseline, add your own checks in realistic conditions, and remember that people read in very different circumstances.