🎨 Accessible Text Color Checker
By ToolNimba Web Dev Team · Updated 2026-06-19
Live preview
The quick brown fox jumps over the lazy dog.
Readable heading sample
Recommended text color
-
-
-
- AA normal (4.5:1)
- AAA normal (7:1)
- AA large (3:1)
-
- AA normal (4.5:1)
- AAA normal (7:1)
- AA large (3:1)
-
- AA normal (4.5:1)
- AAA normal (7:1)
- AA large (3:1)
Pick a background color and this tool tells you instantly whether black or white text reads better on it. It computes the WCAG contrast ratio for both, recommends the more accessible choice, and shows whether each option passes AA and AAA. You can also type a custom text color to test any pairing, with a live preview so you can see the result before you ship it.
What is the Accessible Color Checker?
Readable text is mostly about contrast, the difference in brightness between the letters and the surface behind them. The Web Content Accessibility Guidelines (WCAG) put a number on this with the contrast ratio, which runs from 1:1 (identical colors, invisible text) up to 21:1 (pure black on pure white). The higher the ratio, the easier the text is to read, especially for people with low vision, color blindness, or anyone squinting at a phone in bright sun.
For most backgrounds the safest body-text choice is either solid black or solid white, because those two extremes sit at the ends of the brightness scale. The trick is knowing which one wins, and that is not always obvious by eye. A medium gray, a saturated blue, or a warm orange can each flip the answer. This checker removes the guesswork: it calculates the relative luminance of your background, then the contrast ratio against both black and white, and recommends whichever scores higher.
WCAG sets two pass levels. AA, the common legal and practical target, asks for at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold). AAA is stricter at 7:1 for normal text. Large text gets an easier bar because bigger letters are simply easier to read at lower contrast. The tool shows pass or fail for each level so you can match whatever standard your project, client, or region requires.
When to use it
- Choosing readable button, badge, or label text once you have picked a brand background color.
- Deciding between black and white text on a colored hero section, card, or call-to-action.
- Checking that a custom text-on-background pairing meets WCAG AA before you ship a design.
- Quickly auditing an existing color combination flagged in an accessibility report.
How to use the Accessible Color Checker
- Enter or pick your background color using the hex box or the color swatch.
- Read the recommended text color (black or white) and its contrast ratio.
- Check the AA and AAA pass results shown for both black and white text.
- Optionally type a custom text color to test that exact pairing against the background.
- Use the live preview to confirm the text looks readable before applying it.
Formula & method
Worked examples
You have a dodger-blue background (#1E90FF) and need readable button text.
- Linearize the background channels R=30, G=144, B=255 and compute its luminance, about 0.2744
- Black luminance is 0, so contrast = (0.2744 + 0.05) ÷ (0 + 0.05) = 6.49:1
- White luminance is 1, so contrast = (1 + 0.05) ÷ (0.2744 + 0.05) = 3.24:1
- Black (6.49:1) beats white (3.24:1), so black is recommended
- Black passes AA normal (at least 4.5) and AA large (at least 3) but not AAA normal (needs 7)
Result: Use black text. Contrast 6.49:1, passes WCAG AA for normal and large text.
You have a royal-blue background (#2563EB) and want to know which text color is accessible.
- Compute the background luminance, about 0.1532
- Black contrast = (0.1532 + 0.05) ÷ (0 + 0.05) = 4.06:1
- White contrast = (1 + 0.05) ÷ (0.1532 + 0.05) = 5.17:1
- White (5.17:1) beats black (4.06:1), so white is recommended
- White passes AA normal (at least 4.5); black would fail AA normal here
Result: Use white text. Contrast 5.17:1, passes WCAG AA for normal and large text.
WCAG contrast ratio thresholds by conformance level and text size
| Text type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under 18pt, or under 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+, or 14pt+ bold) | 3:1 | 4.5:1 |
| Graphics and UI components (borders, icons) | 3:1 | not defined |
Recommended text color for common background colors
| Background | Black ratio | White ratio | Recommended |
|---|---|---|---|
| #FFFFFF white | 21.00:1 | 1.00:1 | Black |
| #000000 black | 1.00:1 | 21.00:1 | White |
| #1E90FF blue | 6.49:1 | 3.24:1 | Black |
| #2563EB royal blue | 4.06:1 | 5.17:1 | White |
| #FFD700 gold | 14.97:1 | 1.40:1 | Black |
| #777777 mid gray | 4.69:1 | 4.48:1 | Black |
Common mistakes to avoid
- Judging readability by eye instead of by ratio. Mid-tone backgrounds like a medium gray or saturated teal can look fine with either text color, but only one actually passes WCAG. On #777777, black scores 4.69:1 and white only 4.48:1, so black is the safer pick even though both look close.
- Treating AA large text as good enough for body copy. The 3:1 large-text threshold only applies to text that is 18pt or larger (or 14pt+ bold). Paragraphs, labels, and small captions must reach 4.5:1 for AA. Do not use the easier large-text bar for normal-size text.
- Forgetting hover, focus, and disabled states. A button might pass when idle but fail on hover if the background lightens or darkens. Check every state your background can take, not just the default one.
- Assuming a higher ratio always looks better. Pure black on pure white (21:1) can cause glare and eye strain for some readers. Meeting AA or AAA is the goal, not maxing out the number, so a comfortable dark gray often reads better than absolute black.
Glossary
- Contrast ratio
- A number from 1:1 to 21:1 describing the brightness difference between text and its background. Higher means more readable.
- Relative luminance
- The perceived brightness of a color on a 0 to 1 scale, weighting green most and blue least, used to compute contrast.
- WCAG
- Web Content Accessibility Guidelines, the international standard that defines contrast and other accessibility requirements.
- AA level
- The common conformance target: at least 4.5:1 for normal text and 3:1 for large text.
- AAA level
- The strictest conformance level: at least 7:1 for normal text and 4.5:1 for large text.
- Large text
- Text at least 18pt, or 14pt and bold, which is allowed a lower contrast threshold because it is easier to read.
Frequently asked questions
How do I know if black or white text is more readable?
Enter your background color and the tool computes the WCAG contrast ratio against both black and white, then recommends whichever scores higher. As a rule, light backgrounds favor black text and dark backgrounds favor white, but mid-tones can go either way, which is exactly when the calculated ratio settles it.
What contrast ratio do I need to pass WCAG?
For AA, normal text needs at least 4.5:1 and large text (18pt+, or 14pt+ bold) needs at least 3:1. For the stricter AAA level, normal text needs 7:1 and large text needs 4.5:1. The tool shows pass or fail for each of these so you can match your required standard.
What is the difference between AA and AAA?
AA is the widely used baseline, required by most accessibility laws and design systems. AAA is a stricter, optional level with higher contrast minimums. Aim for AA across your interface, and reach for AAA on critical or small text where you can.
Can I test a custom text color instead of black or white?
Yes. Type or pick a custom text color in the second field and the tool shows its contrast ratio against your background plus its AA and AAA pass results, so you can validate any brand pairing, not just black or white.
Why does my mid-gray background recommend black when white looks fine too?
On a medium background both colors can land near the same ratio, but only the higher one is the accessible choice. For example on #777777 black scores 4.69:1 and white 4.48:1, so black is recommended even though the difference is small and both look acceptable by eye.
Does a higher contrast ratio always mean a better design?
Not always. Meeting AA or AAA is the goal, but maximum contrast like pure black on pure white can cause glare for some readers. Once you clear the threshold you need, choosing a slightly softer dark or light tone can be more comfortable to read.