A decade of Canvas at your command — powered by our custom AI engineStart Building →

Color Contrast Ratio Calculator

The Color Contrast Ratio Calculator computes the WCAG 2.1 contrast ratio between any two colors and tells you exactly which accessibility levels (AA, AAA) you pass or fail for normal text, large text, and UI components. Built for frontend developers, designers, and accessibility auditors who need to verify color combinations meet WCAG standards before shipping.

Configuration

Colors

Content

Design

12

Layout

How to Use

1. Enter your foreground (text) color and background color using the color pickers or hex inputs. 2. Adjust the display card settings — choose a theme, font size variant, and border radius to match your design system. 3. Preview the live contrast ratio result with pass/fail badges for WCAG AA and AAA compliance levels. 4. Copy the generated Bootstrap 5 HTML snippet to embed the result card directly into your documentation or style guide.

Why Use This Tool?

Manually calculating WCAG contrast ratios using the relative luminance formula is tedious and error-prone — this tool does it instantly with no third-party dependencies, no browser extensions, and no sign-up. You get production-ready Bootstrap 5 HTML output you can drop straight into a design system doc, accessibility report, or component library, saving 20–30 minutes per color pair audit.

Frequently Asked Questions

What is the Color Contrast Ratio Calculator?
It's a free browser-based tool that computes the WCAG 2.1 luminance contrast ratio between a foreground and background color, then displays pass/fail status for AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) compliance levels.
What's the difference between WCAG AA and AAA compliance?
WCAG AA is the legal minimum for most accessibility laws (ADA, EN 301 549) — it requires a 4.5:1 ratio for normal text (below 18pt/14pt bold) and 3:1 for large text. AAA is the enhanced standard at 7:1 for normal text and 4.5:1 for large text. AA is the target for most production websites; AAA is typically reserved for critical content like government or medical interfaces. UI components and decorative elements only need to meet 3:1 under the non-text contrast criterion (WCAG 1.4.11).
Is it free?
Yes — the Color Contrast Ratio Calculator is completely free with no signup required. Built by the CanvasBuilder.co team.