Contrast Ratio: 21:1

Normal Text

WCAG AA:

Pass

WCAG AAA:

Pass

Is it easy to read?

Large Text (14pt bold)

WCAG AA:

Pass

WCAG AAA:

Pass

Is it easy to read?

Graphical Objects and User Interface Components

WCAG AA:

Pass

★

About Color Contrast Checker

Diversify India’s Color Contrast Checker is an essential, free online tool for web developers, designers, and accessibility advocates. This powerful tool helps ensure that foreground and background colors meet the recommended accessibility standards, which contributes to better readability and usability for all users, including those with visual impairments.

With the growing importance of digital accessibility, color contrast has become a crucial consideration for web design. This tool allows you to calculate and adjust the contrast ratio between two colors, aligning with the Web Content Accessibility Guidelines (WCAG) standards. A high contrast ratio not only improves readability but also positively impacts your PageSpeed Insights (PSI) accessibility index score, helping your site meet the required accessibility levels.

Key Features of our Color Contrast Checker

  • Easy Contrast Ratio Calculation: Simply select or enter the foreground and background colors, and the tool will calculate the contrast ratio instantly.
  • WCAG Level Validation: The calculated contrast ratio is compared against the WCAG Level AA and Level AAA requirements, ensuring accessibility compliance for normal text, large text, graphical elements, and user interface components.
  • Customizable Lightness Adjustment: Use the lightness slider to fine-tune the brightness of foreground and background colors, allowing you to achieve the required contrast level without compromising on your design.
  • Multi-Format Color Support: Powered by Diversify India’s advanced color conversion capabilities, this tool supports a wide range of color formats, including HEX (#RRGGBB), RGB/RGBA, HSL/HSLA, HWB, and CMYK.

How to Use the Color Contrast Checker

  • Select Foreground and Background Colors: Enter or pick the colors in your preferred format (HEX, RGB, HSL, etc.).
  • Check the Contrast Ratio: The tool will instantly calculate and display the contrast ratio.
  • Adjust Lightness as Needed: Use the lightness slider to modify colors if the initial contrast ratio doesn’t meet your needs.
  • Review WCAG Compliance: Check if the contrast ratio meets the WCAG Level AA and Level AAA requirements for normal and large text, graphical objects, and UI components.

How to Calculate Contrast Ratio

  1. Obtain RGB Values for Both Colors: Use our color converter tool to find the RGB values of both the foreground and background colors.
    • Example: rgb(255, 255, 255) for white and rgb(0, 0, 0) for black.
  2. Convert RGB to Linear RGB:
    • Divide each RGB component by 255 to normalize them to the range 0–1.
    • Apply the sRGB transformation formula: If the normalized value is <= 0.03928, divide it by 12.92; else, apply the formula (value + 0.055) / 1.055 and raise to the power of 2.4.
  3. Example Conversion:
    • For white: R = 255/255 = 1, G = 255/255 = 1, B = 255/255 = 1
    • Since R > 0.03928, the linear value for R = (1 + 0.055)/1.055
    • Since G > 0.03928, the linear value for G = (1 + 0.055)/1.055
    • Since B > 0.03928, the linear value for B = (1 + 0.055)/1.055
    • For black: R = 0/255 = 0, G = 0/255 = 0, B = 0/255 = 0
    • Since R <= 0.03928, the linear value for R = 0/12.92
    • Since G <= 0.03928, the linear value for G = 0/12.92
    • Since B <= 0.03928, the linear value for B = 0/12.92
  4. Calculate Relative Luminance:
    • Use the formula L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
    • For white: L1 = 0.2126 × 1 + 0.7152 × 1 + 0.0722 × 1.
    • For black: L2 = 0.2126 × 0 + 0.7152 × 0 + 0.0722 × 0.
  5. Calculate the Contrast Ratio:
    • Contrast Ratio = (L1 + 0.05) / (L2 + 0.05).
    • Example: (1 + 0.05) / (0 + 0.05) = 21:1
    • Therefore, the contrast ratio between white and black is 21:1.

Why Use a Color Contrast Checker?

Using a contrast checker ensures your website or digital content is accessible to users with various visual needs. By adhering to WCAG guidelines, you improve readability, provide a better user experience, and achieve higher accessibility scores on platforms like PageSpeed Insights.

Why Choose Diversify India’s Color Contrast Checker?

This tool combines ease of use, multi-format compatibility, and instant WCAG validation, making it a valuable resource for creating accessible, user-friendly designs. With its intuitive interface and customization options, our Free Online Color Contrast Checker helps you achieve the ideal balance between aesthetic appeal and functionality, promoting inclusivity in web and app design.

For a seamless, accessibility-focused design process, bookmark the Color Contrast Checker by Diversify India and take a proactive step toward a more inclusive digital experience.

List of Color Tools

Frequently Asked Questions

What contrast ratio is required for WCAG Level AA?

Web Content Accessibility Guidelines (WCAG) Level AA by w3.org requires a contrast ratio of at least 3:1 for the large text, graphical objects, and user interface components. WCAG Level AA requires a contrast ratio of at least 4.5:1 for the normal text.

What contrast ratio is required for WCAG Level AAA?

Web Content Accessibility Guidelines (WCAG) Level AAA by w3.org has more strict requirements for contrast ratios for normal and large text than WCAG Level AA. WCAG level AAA requires at least a 4.5:1 contrast ratio for large text. WCAG level AAA requires a contrast ratio of at least 7:1 for normal text. In WCAG level AAA, there is no specific contrast ratio requirement for graphical objects and user interface components. The ratio of at least 3:1 at level AA is generally considered sufficient for graphical objects and user interface components.

As per WCAG, what is the font size for the large text?

As per WCAG, text that is 18 points or 14 points (bold) is considered large text. In CSS pixels, this typically translates to approximately 24 pixels for regular (non-bold) text and 18.66 pixels for bold text.