Color Contrast Checker

Test WCAG 2.1 AA/AAA contrast compliance for accessible web design

Color Contrast Checker

Foreground Color (Text)

Background Color

Contrast Ratio

21:1

AA Normal Text

Pass

AA Large Text

Pass

AAA Normal Text

Pass

AAA Large Text

Pass

Live Preview

Large Text Preview (18pt+) This is how normal body text (14px) will look with your chosen color combination. Ensure sufficient contrast for readability.

Accessible Alternatives

All contrast levels pass! No suggestions needed.

WCAG 2.1 Requirements

Level	Normal	Large
AA	4.5:1	3:1
AAA	7:1	4.5:1

All processing happens in your browser. No data is sent to any server.

Features

WCAG 2.1 Compliance

Tests both AA and AAA levels for normal and large text against official WCAG 2.1 guidelines

Live Preview

See your color combination in real-time with sample text at different sizes

Smart Suggestions

Get accessible color alternatives automatically when your combination fails contrast requirements

Privacy First

All calculations happen locally in your browser, no data sent to servers

How to Use?

Choose Colors

Enter foreground (text) and background colors using the color picker or HEX input fields.

Check Results

View the contrast ratio and WCAG AA/AAA compliance status for both normal and large text.

Apply Suggestions

If contrast fails, click on a suggested accessible color alternative to apply it instantly.

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. Contrast ratio requirements ensure that text is readable for users with low vision, color blindness, or cognitive disabilities — and for anyone using a screen in bright sunlight. Failing WCAG 2.1 is also a legal compliance issue in many countries under laws like the ADA (US), EN 301 549 (EU), and the Equality Act (UK).

Level AA (minimum standard): normal text requires 4.5:1, large text requires 3:1. Level AAA (enhanced): normal text requires 7:1, large text requires 4.5:1. Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold. Most organizations target AA compliance; AAA is recommended for critical content like healthcare or legal text.

The contrast ratio formula from WCAG 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. Relative luminance is calculated from the RGB values using gamma correction. Pure white (luminance = 1.0) against pure black (luminance = 0.0) gives the maximum ratio of 21:1. This tool performs the full calculation instantly.

WCAG defines large text as text that is at least 18pt (24px) in regular weight, or at least 14pt (approximately 18.67px) in bold weight. Large text has a more lenient contrast requirement (3:1 for AA) because larger characters are easier to read at lower contrast. If your design uses a 16px bold font, it qualifies as large text.

When your chosen colors fail the contrast requirements, the tool automatically suggests alternative foreground or background colors that maintain a similar hue but adjust the lightness to meet WCAG AA. Click any suggestion to apply it instantly. This saves time compared to manually guessing HSL lightness adjustments — the tool finds the nearest compliant shade for you.

The contrast ratio ranges from 1:1 (minimum, no contrast at all — identical colors) to 21:1 (maximum, pure black on pure white). A ratio of 4.5:1 means the lighter color is 4.5 times brighter than the darker color. Common combinations: black on white = 21:1 (excellent), dark gray on white = typically 7-15:1 (good), medium gray on white = often 3-5:1 (borderline), light gray on white = often below 3:1 (fails).

The tool uses solid HEX colors for its calculations, which is the correct approach for WCAG compliance testing. WCAG requires checking the final rendered colors as perceived by the user — if you use rgba transparency, test the actual blended color (what the text looks like on its actual background) rather than the transparent color code itself.

No. All calculations run locally in your browser via JavaScript. No color values are transmitted to any server.

What is the Color Contrast Checker?

A tool that tells you whether your text and background colors meet WCAG 2.1 accessibility standards. Pick two colors and instantly see if they pass AA and AAA levels for both normal and large text. If they fail, the tool suggests accessible alternatives you can apply with one click.

Why Contrast Matters

Poor color contrast is one of the most common accessibility issues on the web. It affects people with low vision, color blindness, and even users in bright sunlight. Meeting WCAG standards is not just good practice, it is often a legal requirement for public-facing websites.

How to Use It

Enter your foreground and background colors using HEX codes or the color picker. The tool instantly calculates the contrast ratio and shows pass or fail for each WCAG level. If contrast is too low, check the suggestions section for accessible color alternatives that maintain a similar look.

Tips for Designers

Test your color palette early in the design process, not after the site is built. Dark text on light backgrounds tends to work well. Avoid relying on color alone to convey information. And remember that large text (18px+ regular or 14px+ bold) has more lenient contrast requirements.

Privacy

Everything runs in your browser. No color data is sent to any server. No accounts, no tracking.

Security and Privacy

Your data security is our priority

Local Processing

All processing happens in your browser

No Data Transfer

Your data is not sent to our servers

No Data Storage

No data is stored or shared

SSL Encryption

SSL encryption for secure connection

Next Step

Color Picker

Advanced color picker with HEX, RGB, HSL, HSV, CMYK conversions and contrast checker

HEX to RGB Converter

Convert between HEX, RGB, and HSL color formats

Was this tool useful?

Color Contrast Checker