🎨 Accessible Color Checker, Black or White Text on Any Background

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. Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, so contrast is not a niche concern, it is core usability.

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. Because the math weights green heavily and blue lightly, a bright lime can read like a light background while a deep navy of the same nominal lightness behaves like a dark one.

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 and 4.5:1 for large text. Large text gets an easier bar because bigger letters are simply easier to read at lower contrast. There is also a separate 3:1 rule for non-text elements such as button borders, form-field outlines, icons, and focus indicators, which many designers forget. The tool shows pass or fail for each level so you can match whatever standard your project, client, or region requires.

Contrast requirements are not just best practice, they are frequently the law. The Americans with Disabilities Act (ADA) in the United States, Section 508 for federal agencies, the European Accessibility Act, and the EN 301 549 standard all reference WCAG AA as the baseline. Failing color contrast is one of the most common issues flagged in automated accessibility audits and one of the easiest to fix at design time, which is why checking it before you ship saves expensive retrofits and reduces legal exposure.

The WCAG 2 ratio formula is a good, stable default, but it is not perfect. It can be over-generous with light text on dark backgrounds and over-strict with some mid-tones. A newer model, APCA (the Advanced Perceptual Contrast Algorithm) being developed for WCAG 3.0, accounts for font size, font weight, and whether colors are light-on-dark or dark-on-light, often predicting real-world readability more accurately. Until WCAG 3.0 is finalized, WCAG 2 contrast ratios remain the conformance standard to test against, and this tool reports them, but it helps to know the rules are evolving.

Finally, remember that passing a ratio is a floor, not a ceiling. Real readability also depends on font choice, weight, size, line length, and the surrounding environment, such as glare on a phone outdoors or a dimmed laptop on a plane. Use the contrast ratio to guarantee a minimum, then sanity-check the live preview on the actual surface and, where possible, on real devices, before you commit a color pairing to production.

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 or Lighthouse scan.
• Building an accessible design system or component library where every token needs a documented contrast result.
• Validating email, slide, or print-to-screen palettes where colors are fixed and you must pick the readable text color.

How to use the Accessible Color Checker

1. Enter or pick your background color using the hex box or the color swatch.
2. Read the recommended text color (black or white) and its contrast ratio.
3. Check the AA and AAA pass results shown for both black and white text.
4. Optionally type a custom text color to test that exact pairing against the background.
5. Use the live preview to confirm the text looks readable before applying it.
6. Adjust the background slightly if you fail, then re-check until you clear the level you need.

Formula & method

Worked examples

WCAG contrast ratio thresholds by conformance level and content type

Recommended text color for common background colors

What each contrast ratio band means in practice

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, and remember focus indicators need 3:1 against their surroundings.
• 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.
• Ignoring non-text contrast for icons and borders. Contrast rules are not only for text. Input outlines, toggle states, chart lines, and meaningful icons must clear 3:1 against adjacent colors, or users who rely on those cues cannot perceive them.
• Relying on color alone to convey meaning. Even with perfect contrast, do not use color as the only signal for errors, links, or status. Add text, underlines, or icons so people with color blindness get the same information.

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.

Non-text contrast

A WCAG rule requiring at least 3:1 contrast for UI components and meaningful graphics such as icons, borders, and focus indicators.

APCA

The Advanced Perceptual Contrast Algorithm proposed for WCAG 3.0, which factors in font size and weight for more realistic readability predictions.

Frequently asked questions