JAEN

Color Contrast Checker

Calculate the contrast ratio between a text color and a background color, and check whether it meets WCAG 2.1 AA and AAA standards. Helps you choose accessible color combinations.

Input data is processed in your browser
Data is never sent to a server

Tool

Large text sample (24px)

This is a normal-size text sample so you can check contrast in a realistic context.

14.44: 1
Normal Text AA Pass AAA Pass
Large Text (18pt+ or 14pt+ bold) AA Pass AAA Pass

"Large text" means at least 18pt (~24px) regular weight, or at least 14pt (~18.7px) bold.

What is the Color Contrast Checker?

This free tool checks whether a text-and-background color combination is readable for a wide range of users, including people with low vision, based on the W3C’s WCAG (Web Content Accessibility Guidelines) 2.1 standards.

It calculates the contrast ratio and shows at a glance whether it meets the AA and AAA thresholds for both normal and large text. Checking your color palette early in the design process helps avoid accessibility rework later.

How to Use

  1. Enter a hex color code for "Text Color" and "Background Color", or click the swatch to pick a color visually.
  2. The contrast ratio and whether it passes WCAG 2.1 AA/AAA (for normal and large text) are shown automatically.
  3. Use the preview to see how the combination actually looks.
  4. Click the "⇄" button to swap the text and background colors.

FAQ

What's the difference between WCAG 2.1 AA and AAA?

AA is the minimum standard most sites should meet; AAA is a stricter standard. For normal text, AA requires a contrast ratio of at least 4.5:1, while AAA requires at least 7:1. Most websites aim for AA compliance.

What counts as "large text"?

WCAG defines large text as at least 18pt (~24px) at regular weight, or at least 14pt (~18.7px) bold. Because large text is easier to read than small text, the thresholds are relaxed — AA requires 3:1, and AAA requires 4.5:1.

How is the contrast ratio calculated?

It follows the WCAG 2.1 relative luminance formula. The ratio is calculated as (L1 + 0.05) / (L2 + 0.05), using the relative luminance of the lighter and darker colors. The result ranges from 1:1 (identical colors) to 21:1 (black on white).

Is my color data sent to a server?

No. All calculation happens entirely in your browser — nothing is sent anywhere.

More Tools in This Category

JSON

Format, validate, query, and convert JSON data.

Text

Count, clean, compare, and transform text in the browser.

Calculators

Calculate dates, units, percentages, BMI, loans, and taxes.

Web

Inspect user agents, IP details, meta tags, and CSS gradients.