How to Check Color Contrast for Accessibility
Color contrast is one of the most important parts of accessible web design. If the contrast between text and background is too low, people may struggle to read your content, buttons, navigation, forms and interface elements.
This matters for everyone, not only people with visual impairments. Low contrast text is harder to read on mobile screens, in bright sunlight, on low-quality displays and when users are tired.
In this guide, you will learn what color contrast is, what contrast ratios mean, which WCAG values are commonly used and how to check your colors with the free Color Contrast Checker by Free Utilities Online.
What Is Color Contrast?
Color contrast is the difference in visual brightness between foreground and background colors.
In web design, this usually means the difference between:
text color and background color;
button text and button background;
icon color and surface color;
link color and page background;
form label color and input background.
For example, black text on a white background has very high contrast:
color: #000000;
background: #ffffff;
Light gray text on a white background has low contrast:
color: #cbd5e1;
background: #ffffff;
The second example may look soft, but it can be difficult to read.
What Is a Contrast Ratio?
A contrast ratio is a number that compares the relative brightness of two colors.
It is usually written like this:
4.5:1
A higher number means stronger contrast. A lower number means weaker contrast.
For example:
black on white has very high contrast;
dark gray on white usually has good contrast;
light gray on white often has poor contrast;
white text on yellow often has poor contrast;
white text on dark blue usually has good contrast.
You do not need to calculate this manually. A color contrast checker can calculate the ratio instantly.
WCAG Contrast Guidelines
WCAG guidelines are commonly used to evaluate whether text has enough contrast.
For WCAG AA, the common minimum targets are:
4.5:1for normal text;3:1for large text;3:1for many graphical objects and UI components.
For WCAG AAA, the targets are stricter:
7:1for normal text;4.5:1for large text.
Most websites should aim for at least WCAG AA contrast for important text and interface elements.
Normal Text vs Large Text
Large text can pass with a lower contrast ratio because it is easier to read.
In practical design, this means:
body text usually needs stronger contrast;
small buttons need strong contrast;
captions and labels need careful checking;
large hero headings may pass with slightly lower contrast;
decorative text should still be readable if it communicates important information.
Do not assume a large heading is always accessible. Always check the actual foreground and background colors.
Common Color Contrast Problems
1. Light Gray Text on White
This is one of the most common design mistakes.
.text-muted {
color: #cbd5e1;
background: #ffffff;
}
It may look elegant in a mockup, but it can be hard to read in real conditions.
A better option:
.text-muted {
color: #64748b;
background: #ffffff;
}
2. White Text on Bright Colors
White text does not work on every colorful background.
For example, white text on yellow, lime, cyan or pale pink often fails contrast checks.
If the background is bright, try using dark text instead:
.button {
background: #fde047;
color: #111827;
}
3. Text Over Images
Text over images can fail contrast because the background changes across the image.
A common fix is to add a dark overlay:
.hero {
background:
linear-gradient(rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.72)),
url("hero.jpg");
color: #ffffff;
}
This makes the text easier to read.
4. Gradients Without Contrast Checks
Gradients can make contrast tricky. Text may be readable on one side of the gradient and unreadable on the other.
If you place text over a gradient, test the text against the lightest and darkest parts of the background.
5. Transparent UI Effects
Glassmorphism, blur effects and translucent cards can reduce readability.
If the background changes behind the card, the real contrast can change too. Increase the card opacity, add a stronger overlay or use a more solid background when needed.
How to Check Color Contrast Online
The easiest way to check contrast is to use a contrast checker.
With the free Color Contrast Checker by Free Utilities Online, you can:
enter a text color;
enter a background color;
calculate the contrast ratio;
see whether the pair passes common accessibility targets;
test different color combinations;
improve readability before publishing.
This is useful for websites, landing pages, apps, buttons, cards, forms and social media assets.
Practical Examples
Good Contrast for Body Text
body {
color: #111827;
background: #ffffff;
}
This type of dark text on a light background is usually easy to read.
Softer but Still Readable Text
.article-text {
color: #334155;
background: #ffffff;
}
This is softer than pure black but still much more readable than pale gray.
Accessible Dark Button
.button {
background: #1d4ed8;
color: #ffffff;
}
Dark blue with white text often works well for primary buttons.
Bright Button with Dark Text
.button-warning {
background: #facc15;
color: #111827;
}
For bright yellow backgrounds, dark text is usually more readable than white text.
How to Improve Low Contrast Colors
If your color pair fails, you can usually fix it in one of these ways:
make the text darker;
make the background lighter;
make the text lighter;
make the background darker;
avoid pale colors for small text;
add an overlay behind text;
use a solid card behind transparent UI;
choose a more accessible color palette.
Small changes can often fix contrast without changing the entire design.
For example:
/* Low contrast */
color: #94a3b8;
background: #ffffff;
/* Better contrast */
color: #475569;
background: #ffffff;
The design still feels soft, but the text becomes easier to read.
Color Contrast for Buttons
Buttons need special attention because they are interactive elements.
Check contrast between:
button text and button background;
button border and page background;
disabled button text and background;
hover state text and background;
focus state indicator and surrounding colors.
A beautiful button that users cannot read or identify is not a good button.
Color Contrast for Links
Links should be easy to identify. Do not rely only on color if the difference is subtle.
For body content, make sure links have enough contrast against the background and are visually distinguishable from regular text.
You can use:
underline;
font weight;
clear color difference;
hover state;
focus state.
Example:
a {
color: #2563eb;
text-decoration: underline;
}
Related Free Tools
You may also find these tools useful:
Together, these tools help you create better color combinations, generate UI styles and check readability before publishing.
FAQ
What is a good color contrast ratio?
For WCAG AA, a common target is at least 4.5:1 for normal text and 3:1 for large text. Higher contrast is usually better for readability.
What is the best contrast for body text?
Dark text on a light background or light text on a dark background usually works best. For body text, avoid very pale gray on white.
Does white text always work on colored backgrounds?
No. White text can fail on bright colors such as yellow, lime, cyan or pale pink. In those cases, dark text may be more readable.
Do gradients affect color contrast?
Yes. Text over a gradient can have different contrast depending on where the text appears. Test the text against the lightest and darkest areas of the gradient.
Is color contrast only important for accessibility?
No. Good contrast improves readability for everyone, including mobile users, older users and people viewing screens in difficult lighting conditions.
Final Tip
Do not choose colors only because they look good in a mockup. Always test the actual text and background colors together.
Use the Color Contrast Checker to verify your color combinations and make your website easier to read for more people.