Colour contrast checker
WCAG AA and AAA contrast ratios for text and interface elements.
FreeRuns in your browserNo signupUpdated 2026-10-29
Uses the WCAG 2.x relative luminance formula. Semi-transparent colours are not supported.
Contrast ratio
6.80:1
Judged as normal text
WCAG AA
Pass
Needs 4.5:1
WCAG AAA
Fail
Needs 7:1
Preview
The quick brown fox jumps over the lazy dog.
Smaller supporting text at 14px for comparison.
Nearest passing text colour
For AAA, try (7.17:1).
.text {
color: #4b5563;
background: #f3f3f1;
}About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
A color contrast checker compares a text colour with its background and reports the contrast ratio that WCAG 2 uses. It then tells you whether the pair passes AA and AAA for the text size you enter, and whether it passes the 3:1 requirement for icons and interface edges. When a pair fails, it walks the text colour towards black or white until it passes and offers that colour as a one-click fix. The maths runs in your browser.
How to use it
- Enter the text colour and the background colour as hex, or use the pickers.
- Set the font size in pixels and tick Bold if the text is bold. The thresholds change for large text.
- Read the ratio and the AA and AAA badges. The preview shows the pair at the chosen size.
- If it fails, click the suggested colour to apply it, then adjust by hand if you want to keep more of the original hue.
How to read the result
Suppose your body text is #4b5563 on an off-white #f3f3f1 at 16px. The ratio comes out at 6.80:1. That clears the AA threshold of 4.5:1 with room to spare, but falls short of AAA, which wants 7:1. Both badges tell you that at a glance. The icons line passes too, because anything above 3:1 does.
Now lighten the text to #9ca3af, a common "muted" grey. The ratio drops to 2.29:1 and every check fails, including the 3:1 icon line. The fix line suggests #6a6f77, which reaches 4.55:1. That is the smallest change that passes, so the result still looks muted rather than black.
AA is the level most contracts and public-sector rules ask for. AAA is worth hitting for long reading and for anything older users rely on. Remember that the ratio only covers solid colours; text over images or gradients has to be checked at its weakest point.
Every site we build through our website design and development service is checked against AA before launch. To convert a colour between formats first, try the colour converter.
Questions
Frequently asked.
What contrast ratio does WCAG require?
For AA, normal text needs 4.5:1 and large text needs 3:1. For AAA, the figures rise to 7:1 and 4.5:1. Icons, input borders and focus rings that carry meaning need 3:1 against their surroundings. Decorative elements and disabled controls are exempt.
What counts as large text?
Text that is at least 24px, or at least 18.66px when bold. The checker switches the thresholds automatically when you enter a size above those limits, which is why the same pair can pass for a heading and fail for body copy.
Why does my grey text fail when it looks fine to me?
Most people read low-contrast grey comfortably on a bright screen in a dark room. Move outdoors, dim the screen, or lose some contrast sensitivity with age and the same text vanishes. The ratio is a floor for the worst realistic case, not a judgement of your monitor.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide