Can People Actually Read Your Text?
Light gray text on a white background looks sleek in mockups. It also looks invisible to anyone over 50, anyone in direct sunlight, and anyone with low vision. Roughly 1 in 12 men has some form of color vision deficiency, and plenty of people without any deficiency still struggle with low-contrast text.
WCAG sets minimum contrast ratios for a reason. This tool tells you whether your text/background combination passes. Enter both colors, and you’ll see the exact ratio along with pass/fail results for WCAG AA and AAA at both normal and large text sizes.
The Numbers That Matter
4.5:1: minimum ratio for normal body text under WCAG AA. This is what most accessibility laws reference.
3:1: minimum for large text (18pt regular or 14pt bold) under WCAG AA. Also the minimum for UI components like buttons and form inputs under WCAG 2.1.
7:1: the enhanced WCAG AAA standard for normal text. Harder to achieve, but significantly more readable.
Dark gray (#333333) on white (#FFFFFF) gets you 12.63:1, passes everything easily. Medium gray (#767676) on white hits exactly 4.54:1, scrapes past AA for normal text but fails AAA. Light gray (#AAAAAA) on white? 2.32:1. Fails everything. Yet that light gray shows up in countless designs.
How to Test Your Palette
Pick your text color and background color using the color pickers or by entering HEX values. The tool calculates the contrast ratio using the official WCAG relative luminance formula (sRGB gamma correction, not just simple brightness). The swap button lets you reverse foreground and background quickly, useful when you’re testing whether your brand blue works as both text-on-white and white-on-blue.
A live preview shows the actual text rendering so you can see it, not just check a number. Sometimes a combination passes WCAG AA but still feels hard to read at small sizes. Trust the numbers for compliance, but trust your eyes too.
Beyond Text
WCAG 2.1 expanded contrast requirements to cover UI components, buttons, inputs, icons, and graphical objects that convey meaning all need at least 3:1 against their background. That subtle outline on your form inputs? Check it here.
The Color Blindness Simulator helps you verify that color pairs remain distinguishable under vision deficiencies. The Color Picker finds exact foreground and background values. The Color Format Converter translates between HEX, RGB, and HSL when you need to tweak specific channels.
Accessibility isn’t optional in many jurisdictions, ADA, Section 508, and EN 301 549 all reference WCAG. This tool gives you concrete pass/fail data to show stakeholders when recommending color changes. Everything runs in your browser.