Contrast Color Finder - Black or White Text?
Enter a background color and instantly see whether black or white text has better WCAG contrast, with exact ratios and AA/AAA pass/fail badges.
Black Text
The quick brown fox jumps
4.56:1
White Text
The quick brown fox jumps
4.60:1
Free Contrast Color Finder — Black or White Text?
Enter any background color and this tool instantly tells you whether black or white text reads better against it, using the WCAG relative luminance and contrast ratio formulas — with the actual contrast ratio numbers and pass/fail badges against the WCAG AA and AAA accessibility thresholds.
How to Use It
Type a hex color code (or use the color picker) for your background. Both black and white text options render live against that background along with their exact contrast ratio and whether each passes WCAG AA (4.5:1 for normal text) and AAA (7:1) — the better-contrasting option is marked "Recommended".
Example
A medium blue background like #1976d2 gives white text a contrast ratio around 4.6:1 (passing WCAG AA) versus black text at around 4.5:1 — close, but white is the safer, higher-contrast choice for that particular shade.
Common Use Cases
- Choosing readable text color for a button, banner, or badge with a custom background.
- Checking a brand color against WCAG accessibility guidelines before shipping a design.
- Deciding between light and dark text for a dynamically generated background color.
FAQs
What is the WCAG contrast ratio formula?
WCAG defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from the linearized (gamma-corrected) sRGB red, green, and blue channels, weighted 0.2126, 0.7152, and 0.0722 respectively, reflecting how the human eye perceives each color's brightness.
What's the difference between AA and AAA?
WCAG AA is the standard accessibility bar and requires a contrast ratio of at least 4.5:1 for normal body text. WCAG AAA is the stricter, enhanced level and requires at least 7:1. Large text (roughly 18pt or 14pt bold and above) has lower thresholds under both levels.
Is my color data uploaded anywhere?
No — every calculation happens entirely client-side in your browser. Nothing you enter is sent to a server.