search

Found

info Overview

Check WCAG 2.1 contrast ratio between two colors with 6 AA/AAA pass-fail checks for normal text, large text, and UI.

📘 How to Use

  1. Enter or select the hex code for the foreground color.
  2. Enter or select the hex code for the background color.
  3. Click the swap button to reverse the foreground and background colors if necessary.
  4. Verify the calculated contrast ratio and the WCAG 2.1 PASS/FAIL badges.

Color Contrast Checker (WCAG 2.1)

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large text (24px bold)

Contrast Ratio

21.00 : 1

AA Level

Normal Text (≥ 4.5:1)
Large Text (≥ 3:1)
UI Components (≥ 3:1)

AAA Level

Normal Text (≥ 7:1)
Large Text (≥ 4.5:1)

grid_view Related

Article

Color Contrast Checker | Validate WCAG 2.1 Accessibility Ratios

This tool calculates the exact contrast ratio between a foreground and background color based on their relative luminance. It is designed for web developers and UI/UX designers to strictly verify if their color pairings meet WCAG 2.1 accessibility thresholds.

💡 Tool Overview

  • Real-time Ratio Calculation Instantly computes the contrast ratio, ranging up to 21.00:1, by evaluating the relative luminance of the provided hex codes.
  • WCAG 2.1 Compliance Verification Automatically applies WCAG 2.1 thresholds to display explicit PASS or FAIL badges for Level AA and Level AAA standards.
  • Component-Specific Assessment Breaks down the evaluation into distinct categories: normal text, large text, and UI components, applying the appropriate mathematical thresholds for each.
  • Interactive Live Preview & Swap Renders an immediate visual preview of normal and large text. A dedicated swap button allows you to effortlessly invert the foreground and background values for rapid testing.
  • Robust Hex Normalization Accepts and correctly parses both 3-digit and standard 6-digit hex color codes, automatically normalizing inputs for accurate conversion.

🧐 Frequently Asked Questions

Q. What are the required contrast ratios under WCAG 2.1?

A. To pass WCAG 2.1 Level AA, you need a minimum contrast ratio of 4.5:1 for normal text, and 3:1 for both large text and UI components. For the stricter Level AAA compliance, normal text must achieve a ratio of at least 7:1, while large text requires a ratio of 4.5:1 or higher.

Q. How is the contrast ratio mathematically determined?

A. The tool first parses the hex color inputs into RGB values and applies an sRGB-to-linear conversion formula. It then calculates the relative luminance for both the foreground and background. The final ratio is derived by dividing the luminance of the lighter color (plus an offset of 0.05) by the luminance of the darker color (plus 0.05).

📚 The Role of Relative Luminance in UI Accessibility

When architecting accessible user interfaces, evaluating text readability solely by eye is subjective and prone to error. Calculating the contrast ratio based on relative luminance provides a mathematically objective and standardized method to ensure visual clarity.

By strictly adhering to the specific numeric thresholds defined in the WCAG 2.1 guidelines—such as achieving at least a 4.5:1 ratio for Level AA normal text or a 7:1 ratio for Level AAA—developers guarantee that their digital content remains fully legible. Meeting these exact standards is critical for delivering inclusive web experiences that accommodate varying screen conditions and support users with visual impairments.