CalculatorsJust Added
Color Contrast Calculator
Check foreground and background color contrast ratios against WCAG AA and AAA accessibility standards with a live preview.
The quick brown fox
Normal text preview — 16px
Small text — 12px
Try a Preset
About WCAG
WCAG (Web Content Accessibility Guidelines) defines contrast requirements for accessible text. AA is the minimum legal standard in many countries. All calculations run locally in your browser.
Frequently Asked Questions
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). The stricter Level AAA requires 7:1 for normal text and 4.5:1 for large text.
WCAG (Web Content Accessibility Guidelines) is a set of international standards published by the W3C that defines how to make web content accessible to people with disabilities. Contrast requirements are part of Guideline 1.4 (Distinguishable).
WCAG 1.4.11 (Non-text Contrast, Level AA) requires a 3:1 contrast ratio for UI components like icons, input borders, and focus indicators — but not for decorative images.
Black (#000000) on white (#ffffff) has a contrast ratio of 21:1 — the maximum possible ratio. It always passes all WCAG levels.
Yes. The contrast calculation uses the WCAG luminance formula running locally in your browser. Your color values are never sent to any server.
Related Tools
You might also find these utilities helpful for your color contrast calculator workflow.
Calculators
Percentage Calculator
Calculate percentage of a number, percentage change, what percent X is of Y, and work backward from a percentage — all in one tool.
New
Calculators
Aspect Ratio Calculator
Calculate width, height, or ratio from any two values. Supports common presets like 16:9, 4:3, and 1:1 with a visual preview.
New