Contrast Ratio Calculator: Ensure WCAG Accessibility for Your Design

Calculate Your Color Contrast Ratio

Enter a valid 3 or 6-digit hex code for the text color.
Enter a valid 3 or 6-digit hex code for the background color.

Use our free Contrast Ratio Calculator to check if your color combinations meet WCAG 2.1 accessibility guidelines. Perfect for web designers, developers, and content creators to ensure optimal readability and user experience.

Formula:

The contrast ratio (CR) quantifies the difference in luminance between two colors, crucial for text readability. It's calculated using the relative luminance of the lighter color (L1) and the darker color (L2).

CR = (L1 + 0.05) / (L2 + 0.05)

Where:

  • L1: Represents the relative luminance of the lighter of the two colors (a value between 0.0 and 1.0).
  • L2: Represents the relative luminance of the darker of the two colors (a value between 0.0 and 1.0).

Our calculator automatically converts your input Hex color codes into their respective relative luminance values to provide an accurate contrast ratio, helping you achieve WCAG compliance.

Computing and Tools

<b>90 Day </b>: Instantly Find Dates 90 Days From Today or Any Given Date

Go to Calculator

<b>Labor Force Participation Demographic Gap </b>: Compare Workforce Engagement Rates

Go to Calculator

1/4 Mile ET : Estimate Your Quarter Mile Elapsed Time

Go to Calculator

12 Volt Wire Size : Optimize Your DC Circuit Design

Go to Calculator

16:9 Aspect Ratio : Find Widescreen Dimensions

Go to Calculator

180 Day : Easily Find Dates 180 Days Forward or Back

Go to Calculator