Accessible Color Checker
Check if your text and background colors are accessible and get WCAG-compliant color suggestions that pass AA or AAA when they fail.
Large sample text
Small sample text shows how readable the body copy is at this contrast.
Accessible color suggestions
These adjust your text color's lightness while keeping its hue, until it meets your target.
No accessible version of this text color could reach the target against this background. Try changing the background color or picking a different hue.
Make your text accessible with this free accessible color checker. Enter your text and background colors, choose a WCAG target level, and instantly see whether the pair is accessible. When it falls short, the tool suggests fixed, WCAG-compliant text colors that keep your original hue but adjust the lightness until they pass AA or AAA. Everything runs in your browser, so nothing is uploaded and there is no sign-up.
What is an accessible color checker?
An accessible color checker tests whether a text and background color combination meets the Web Content Accessibility Guidelines (WCAG) contrast requirements, so that people with low vision or color blindness can still read your content. Unlike a plain contrast checker that only reports a pass or fail, this tool goes a step further: when a color pair is not accessible, it automatically generates corrected text colors that reach your chosen target while staying as close as possible to your original color.
How to fix inaccessible colors
Set your colors and target, and apply one of the suggested accessible colors when the pair fails.
- Enter your text color, for example #7a7a7a, with the swatch or hex field.
- Enter your background color, for example #ffffff.
- Choose the WCAG level you need to meet (AA or AAA, normal or large text).
- If the pair fails, review the suggested accessible text colors and their ratios.
- Click Apply on a suggestion to load it as your new text color.
How the color suggestions work
Each suggestion keeps your text color's hue and saturation but shifts its lightness in HSL — both darker and lighter — until the contrast against your background meets the target ratio. This produces accessible colors that still feel like your brand or palette, rather than swapping in unrelated colors. The suggestion with the highest ratio is shown first so you can pick the safest option or the closest match to your original.
WCAG AA and AAA targets
WCAG level AA requires at least 4.5:1 for normal text and 3:1 for large text, while the stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. Large text means roughly 18pt (24px) regular or 14pt (18.66px) bold and above. Use the target selector to check and fix against the exact level your project needs.
Why use this accessible color checker?
- Tells you instantly whether a color pair passes your chosen WCAG level.
- Suggests fixed, accessible text colors when the pair fails.
- Keeps your original hue so suggestions stay on-brand.
- Supports AA and AAA targets for normal and large text.
- Live preview shows real sample text in your colors.
- Runs entirely in your browser — free, no ads, no sign-up.
Frequently asked questions
How is this different from a contrast checker?
A contrast checker only measures the ratio and tells you whether it passes. This accessible color checker does that too, but when the colors fail it also generates corrected text colors that reach your target level, so you can fix the problem in one click instead of guessing new values by hand.
How do the accessible color suggestions stay on-brand?
Suggestions adjust only the lightness of your text color in HSL while preserving its hue and saturation. That means the recommended color is a lighter or darker version of what you already had, keeping the same character rather than replacing it with an unrelated color.
What WCAG level should I target?
Level AA (4.5:1 for normal text, 3:1 for large text) is the common legal and design baseline and is a good default. Aim for AAA (7:1 normal, 4.5:1 large) for body-heavy interfaces or where the highest readability matters.
Why does it sometimes find no accessible color?
If your background sits in the middle of the lightness range, no version of your text hue may be dark or light enough to reach the target against it. In that case, change the background color or choose a different text hue, and the tool will look again.
Are my colors uploaded anywhere?
No. All contrast calculations and color suggestions happen locally in your browser. Nothing about your colors is sent to a server.