Can I use keyboard shortcuts?

Yes — type directly and press Enter to calculate.

Does it support decimals and negative numbers?

Yes, full decimal and negative number support.

WCAG Contrast Checker & Color Picker (Free Tool)

Validate your color combinations against the latest WCAG 2.1 & 2.2 accessibility standards. Ensure your design is readable for everyone.

Foreground Color

Background Color

Sample Text

This is how your text will appear

Color History

Contrast Results

4.68:1

WCAG AA i WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Normal Text (≥ 4.5:1): PASS

Large Text (≥ 3:1): PASS

UI Components (≥ 3:1): PASS

WCAG AAA i WCAG AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Normal Text (≥ 7:1): FAIL

Large Text (≥ 4.5:1): PASS

Recommendations

This color combination meets WCAG AA requirements but falls short of AAA for normal text. Consider darkening the text or lightening the background for better readability.

Decoding WCAG 2.1/2.2 Success Criteria

Understanding the Web Content Accessibility Guidelines (WCAG) is essential for creating inclusive digital experiences.

WCAG AA vs. AAA: Required Contrast Levels for Text

WCAG defines two levels of conformance: AA (standard) and AAA (enhanced). For most organizations, AA compliance is the target.

Graphical Objects and UI Components: The 3:1 Standard

Non-text elements like icons, buttons, and form controls must have a contrast ratio of at least 3:1 against adjacent colors.

Test and confirm that your color combinations meet established web accessibility standards, particularly theWCAG 2.1 . requirements. : Ensuring
WCAG Accessibility and Compliance

Beyond WCAG 2: Exploring the APCA Contrast Model

The Accessible Perceptual Contrast Algorithm (APCA) is the proposed replacement for the current WCAG 2.x contrast formula.

Limitations of the Current Luminosity Formula

The current WCAG 2 formula sometimes fails to accurately reflect human perception of contrast.

How APCA Calculates Perceived Contrast and Why It Matters

APCA considers spatial properties, text weight, and context to provide a more accurate measure of perceived contrast.

Remediation: Practical Steps to Fix Contrast Failures

When your color combinations fail contrast checks, here's how to fix them.

Adjusting Color Properties: HSL and Saturation Optimization

Using HSL (Hue, Saturation, Lightness) values can help you systematically adjust colors to meet contrast requirements.

Creating an Accessible Color Palette from Scratch

Start with accessibility in mind by choosing colors that naturally provide sufficient contrast.

Color Contrast Checker – Frequently Asked Questions

What is the minimum contrast ratio required for normal text under WCAG AA? +

For standard WCAG AA conformance, the contrast ratio between text and its background must be at least 4.5:1.

What is a contrast ratio, and how is it calculated? +

The contrast ratio is a numerical value representing the difference in perceived luminance between the foreground (e.g., text) and the background color. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast, like black on white).

Does "large text" require the same contrast ratio as normal text? +

No. For "large text" (which is typically 18pt regular or 14pt bold), the required contrast ratio for WCAG AA conformance is lower, requiring a minimum of 3:1.

Are contrast rules applied to graphical objects or icons? +

Yes. WCAG 2.1 includes Success Criterion 1.4.11, which mandates that graphical objects and user interface components must have a contrast ratio of at least 3:1 against adjacent colors.

What is the primary difference between WCAG AA and AAA conformance? +

WCAG AA is the standard level generally targeted for compliance, requiring 4.5:1 contrast for normal text. AAA requires an enhanced level of accessibility, demanding a higher 7:1 contrast ratio for normal text.

If my contrast checker says a color combination "fails," what should I do? +

You must adjust either the foreground or background color until the checker indicates a passing ratio (4.5:1 or better for AA). Often, slight adjustments to the brightness or saturation of one color are enough.

What are the best tools for checking color contrast? +

Many reliable online contrast checkers are available from leading accessibility organizations, including tools provided by Level Access, Deque University, TPGi, WebAIM, and Siteimprove.

What is APCA and how does it relate to contrast checking? +

APCA stands for Accessible Perceptual Contrast Algorithm. It is the proposed replacement calculation method for luminosity ratios in the upcoming WCAG 3 standards, aiming to provide a more perceptually accurate measure of color contrast.