logo Toolmaxy

Color Contrast Checker

Check contrast ratios between text and background colors to ensure WCAG accessibility compliance.

Configure Colors

HSL: 244°, 79%, 60%
HSL: 250°, 100%, 98%

Contrast Analysis

8.55:1
Passes AA & AAA
WCAG AA (Normal Text - 4.5:1) Pass
WCAG AA (Large Text - 3.0:1) Pass
WCAG AAA (Normal Text - 7.0:1) Pass
WCAG AAA (Large Text - 4.5:1) Pass
UI Components / Non-text (3.0:1) Pass

Live Preview Sandbox

Accessible Design Title

Large Text (24px Bold)

This is a live interactive simulation. Changing the background and foreground colors in the panel above will update this sandbox instantly. High-contrast typography ensures readability for all users.

Normal Text (16px)
Sample Form Input Field
Interactive UI Elements (Needs 3:1)

What is a Color Contrast Check for Accessibility?

A color contrast check measures the difference in light reflectance (luminance) between text and its background. For people with visual impairments like color blindness, cataracts, or low vision, low contrast elements are completely unreadable. Performing a proper color contrast check for accessibility ensures that all content is legible.

This color contrast checker for accessibility runs entirely client-side. It implements the standard equations defined by the W3C in the Web Content Accessibility Guidelines (WCAG) to calculate contrast ratios. By keeping all computations inside your browser, it ensures 100% data privacy since none of your palettes are sent to external servers.

Designing with high-contrast colors is not just about compliance; it improves user experience for everyone. For instance, reading content on a mobile device in bright sunlight is significantly easier when the interface maintains optimal contrast ratios.

For a deep dive into WCAG standards, mathematical relative luminance formulas, and design strategies, check out our companion guide: Color Contrast Check for Accessibility: The Complete Developer Guide.

How to Use this Color Contrast Checker

Our tool provides real-time checks and suggestions. Follow these steps:

  1. Input your text color in the Text Color (Foreground) box using a Hex code, or click the color picker icon to select a shade visually.
  2. Input your background shade in the Background Color box.
  3. Observe the calculated contrast ratio instantly. A ratio of 21:1 represents maximum contrast (black and white), while 1:1 represents no contrast.
  4. Look at the compliance list to see whether the colors satisfy Level AA and AAA standards.
  5. Use the Lightness Sliders to fine-tune the colors until they pass, or click the Smart Adjustments suggestion buttons to automatically apply a compliant color.

Understanding WCAG 2.1 Contrast Standards

The Web Content Accessibility Guidelines establish clear thresholds to maintain readability. These guidelines categorize requirements based on text size and level of compliance:

Compliance Level Normal Text (< 24px) Large Text (≥ 24px or 18.6px bold) UI Elements
WCAG Level AA (Minimum) 4.5:1 3.0:1 3.0:1
WCAG Level AAA (Enhanced) 7.0:1 4.5:1 N/A

Level AA is the target standard for most legal regulations, including Section 508 in the US and the European Standard EN 301 549. Level AAA is a stricter threshold designed to make the content accessible to people with more severe visual challenges.

How Contrast Ratios Are Calculated

Calculating the contrast ratio involves converting the red, green, and blue (RGB) color channels into relative luminance values.

First, each sRGB channel is divided by 255. We then linearize the channel values to remove gamma compression:

For C in [R, G, B]: if C ≤ 0.03928 then C = C / 12.92 else C = ((C + 0.055) / 1.055)^2.4

Next, relative luminance (L) is calculated using the weighted coefficients representing human sensitivity to different wavelengths of light:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Finally, the contrast ratio is determined by dividing the lighter luminance (L1) by the darker luminance (L2), adjusting with a constant offset of 0.05:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

This offset represents ambient light reflections on the screen, preventing division by zero when calculating contrast ratios with pure black.

Frequently Asked Questions

What is a color contrast check for accessibility?

A color contrast check evaluates the luminance ratio between foreground text and its background. This test ensures that written content is easily readable for people with visual impairments, including low vision, color blindness, or age-related visual changes, in accordance with Web Content Accessibility Guidelines (WCAG).

What are the WCAG 2.1 contrast ratio requirements?

WCAG 2.1 establishes two compliance levels: Level AA (minimum) requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt/24px or larger, or 14pt/18.67px bold). Level AAA (enhanced) requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Non-text elements and UI components require a minimum ratio of 3:1.

How is the color contrast ratio calculated?

The contrast ratio is calculated using the relative luminance of the two colors, which ranges from 0 (darkest black) to 1 (lightest white). The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. This yields a ratio between 1:1 (no contrast) and 21:1 (maximum contrast, e.g., black on white).

What qualifies as large text under WCAG guidelines?

Under WCAG rules, "large text" is defined as text that is at least 18 points (24px) normal weight, or at least 14 points (approx. 18.67px) bold. Standard body text is considered "normal text" and is subject to the stricter 4.5:1 (AA) or 7:1 (AAA) contrast requirements.

Are my checked colors uploaded to any server?

No. This color contrast checker performs all calculations entirely client-side within your browser. None of your design data, color palettes, or hex codes are uploaded to a server, ensuring 100% privacy and offline capability.

How can I fix a color combination that fails contrast checks?

You can adjust the lightness or saturation of your colors. Typically, darkening the text color (if the background is light) or lightening the text color (if the background is dark) will increase the contrast. This tool features interactive sliders to easily find compliant shades.

More Developer Tools

View all