Why contrast ratio matters
A contrast ratio tells you how easy text is to read against its background. In digital accessibility, this directly affects people with low vision, color-vision deficiency, aging eyes, and users in bright or low-light environments. Strong contrast is not just a compliance checkbox—it improves usability for everyone.
This calculator helps you evaluate two colors quickly so you can make design decisions grounded in the WCAG contrast guidelines. You can test interface text, call-to-action buttons, labels, cards, and UI states before shipping.
How contrast ratio is calculated
Contrast is based on relative luminance for each color. After converting RGB values into linear light values, each color gets a luminance score. The brighter luminance is divided by the darker luminance using this formula:
(Lighter + 0.05) / (Darker + 0.05)
The resulting value ranges from 1:1 (no contrast, same color) up to 21:1 (maximum contrast, black on white).
WCAG thresholds used by this calculator
Normal body text
- AA: 4.5:1 or higher
- AAA: 7:1 or higher
Large text (18pt+ regular or 14pt+ bold)
- AA: 3:1 or higher
- AAA: 4.5:1 or higher
How to use this contrast ratio calculator
- Pick a foreground color (text) and a background color with the color pickers.
- Or paste values manually in HEX (for example,
#0F172A) or RGB format. - Click Calculate Contrast to view the ratio and pass/fail results.
- Use Swap Colors if you want to test reversed text/background combinations.
Best practices for accessible color systems
1) Define semantic tokens
Instead of ad-hoc color choices, create a token system such as text-primary, text-muted, surface-default, and surface-inverse. Then validate each pair for contrast compliance.
2) Test real UI states
Don’t stop at a single text/background pair. Check hover, focus, disabled, and error states too. Accessibility often fails in secondary states.
3) Keep readability over aesthetics
Subtle gray-on-gray palettes can look modern but fail users. If readability is poor, increase contrast before launch. Accessibility and visual polish can coexist.
4) Remember non-text contrast
WCAG also includes requirements for interface components and graphical objects. Borders, icons, and controls should have sufficient contrast against adjacent colors.
Common mistakes to avoid
- Using brand colors without testing them on every background.
- Relying on color alone to convey meaning (like red text for errors without icons/labels).
- Checking only desktop screens and skipping mobile brightness conditions.
- Ignoring large-text exceptions and applying one threshold everywhere.
Final note
Contrast is one of the fastest accessibility wins you can implement. A small color adjustment can dramatically improve readability, reduce friction, and make your site usable to more people. Keep this calculator in your workflow and validate early in the design process.